1. Technology

min-width and max-width for IE6

Join the Discussion

Questions? Comments?

The two basic choices that you have when designing your web pages are to have either a fixed width where the content width stays the same regardless of the width of the browser window or a variable width layout where the width is dependent on the width of the window. To set up either of these you use the width attribute in your stylesheet and specify the width in pixels for a fixed layout and as a percentage where you want to adjust the width dependent on the width of the browser window.

If neither of these really suits you then for modern browsers we can use min-width and max-width to set minimum and maximum wwidths for the content and specify the width as a percentage. This will allow the content to fill a set percentage of the width of the browser window provided that the content does not end up becoming narrower or wider than the limits that we specify and we get a lot of the benefits of both a fixed width and variable width layout. Since there are only two widths that people generally use for paper (A4 and letter) and the width available for printed output will be approximately the same for all printers (depending on the printer margins) we might consider using a 100% width for our content when printing it out. The code we would use to do this if we put it inline between style tags or all in the one stylesheet woulld look like this:

@media screen, projection {
#wrapper {width:94%;min-width:570px;max-width:850px;margin:0 auto;}
}
@media print {
#wrapper {width:100%;}
}

You might have a whole lot of other attributes that you are defining for your content and might put the two stylesheet commands in separate stylesheets with the media specified in the link tag but bbasically these are the attributes that you would specify to get such a layout in modern browsers that understand these attributes. In this example I have set the width to be 94% of the available space in the browser window provided that the width stays between 570 and 850 pixels.

The biggest problem with this code is that Internet Explorer 6 does not understand min-width and max-width and so if we only use that code then that browser will display the page differently from the other browsers.

We can solve this problem and get IE6 to behave the same way as modern browsers by adding a few lines of JScript (Internet Explorer's version of Javascript) to our code.

Internet Explorer actually allows you to code JScript directly into the stylesheet and so we can add a couple of JScript IF statements into the stylesheet to set the width attribute depending on the available width within the browser window. This will get the initial display of the page using exactly the same with for the content as the more modern browsers ddo provided that IE has active scripting enabled.

This doesn't quite solve the problem though because the other browsers will recalculate the width to use when printing the page and will also recalculate the width automatically if the browser is resized. The one line addition to our stylesheet will only calculate the width once when the page first loads and so we need to add several more lines of actual JScript code to handle the recalculation of the width when necessary. Here's how the code we need to add to our page looks that will get IE6 to behave the same way with definiing the width of our content as we get in other browsers using the min-width and max-width:

<!--[if IE 6]>
<style>
wrapper {width: expression(document.body.clientWidth > 850 ? "850px" : (document.body.clientWidth < 571 ? "570px" : "94%"));}
</style>
<script type="text/javascript">
function calcWidth() {
document.getElementById('wrapper').style.width = document.body.clientWidth > 850 ? '850px' : (document.body.clientWidth < 571 ? '570px' : '94%')
}
onbeforeprint = function() {document.getElementById('wrapper').style.width = '100%';}
onafterprint = calcWidth;
onresize = calcWidth;
</script>
<![endif]-->

As you can see, this code is wrapped within IE conditional tags so that all browsers except for IE6 will trat the whole thing as a comment. The code is also dependent on which doctype you are using in your page and if you use a strict doctype then you need to replace all of the document.body references with document.documentElement instead. You will also need to change all of the width values in the code to match those that you specified in your main stylesheet for the sizes to use in the other browsers.

The code needed to get IE6 to emullate the min-width and max--width attributes that Microsoft "forgot" to implement in the browser is significantly longer than the two attributes that it is emulating but it does get IE6 to adjust the width of the page the same way that the other browsers do - at least it does when active scripting is enabled. If active scripting is disabled then IE6 ends up just using the percentage to calulate the width but at least the number of visitors you will have where that will apply will be far fewer than it would be if you didn't apply the patch to emulate the extra width attributes.

©2014 About.com. All rights reserved.