max-width and IE6

I have been working on a new set of templates to offer to the Migrating from FrontPage to Expression Web EBook owners and class students. I wanted to use a photo taken by a friend in the masthead. I also wanted to limit the width of the container for the page content to no wider than 1200px. No problem, just use max-width property in the external style sheet.

Example:

#outerWrapper {
	background-color: #fff;
	width: 80%;
	text-align: left;
	max-width: 1200px;
	margin: 20px auto;

}

Only one problem, Internet Explorer 6 and below does not recognize the max-width property. So I went searching with my friend Google and came up with a number of suggestions for fixes:

My choices seemed to be to use a simple “hack” to get it working, by using expressions (in javascript-like syntax) in CSS which Expression Web 3.0 did NOT like or javascript. I chose the latter and used the last one on the above list as it seemed to handle not only max-width, but min-width, max-height, and min-height. Of course, if the viewer has javascript disabled it will not work.

The three column template that is one of the three offered in this package looks like the image below and should display from 800x600px with no horizontal scroll and for higher resolution monitors will display at no wider than 1200px. A simple solution to a vexing problem.

So if you want to use a minimum or maximum width or height as part of your style sheet, you might give doxdesk CSS minimum and maximum sizes a try. Just download the minmax.js file and publish it to your server. Then add the following line of code to your DWT:

<script type="text/javascript" src="minmax.js"></script>

Make sure you adjust the path to the script to where you have published it to your server. My javascript files are located in a folder called js.

misty-morn3

Misty Morn 3 Column Template.

Comments

  1. Excellent write-up, I observed this just in time. I’m gonna keep this blog site bookmarked for future reseach. cheers Mate.

Speak Your Mind

*