Minimum and Maximum widths in IE6 CSS

In a previous article I showed you how easy it is to create a constrained fluid layout i.e. one with a minimum and maximum widths. While this works on all standards compliant browsers, it doesn’t work in Internet Explorer 6.

There is, however, a prorietary way of implmenting this in IE as shown below:

  width: expression( document.documentElement.clientWidth < 625 ? '500px' : (document.documentElement.clientWidth > 1125 ? '900px' : '80%') );

This line is saying that we want a body width of 80%, with a minimum body width of 500px (i.e. a client width of 500/80% = 625), and a maximum body width of 900px. This is done using the expression evaluation support in IE (not a good thing btw).

Now, this is not a standards compliant way of doing things, so any validators will start complaining, as will the other browsers, and rightly so. To hide it from everyone except ie6, we’re gonna cheat and place this in a stylesheet that is conditionally included.

So, save this in a file called ie6.css, and add the following to your x/html files:

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="ie6.css" />

And voila! our site should work in IE6 the same way it does in the other browsers.

Published by

Musaul Karim

Software Engineer, Hobbyist Photographer, and a bit of a gadget geek.

4 thoughts on “Minimum and Maximum widths in IE6 CSS”

  1. Pingback: Best Designs

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>