CSS Hackz Series: Minimum Width, Maximum Width for Internet Explorer 6
Opening the CSS Hackz series is the infamous CSS-expression hack for achieving minimum and maximum widths in Internet Explorer 6.
Here is how to set the maximum width for IE 6:
#target_element {
width: expression((document.body.clientWidth > 778)? "777px" : "auto");
max-width: 777px;
}Here is how to set the minimum width for IE 6:
#target_element {
width: expression((document.body.clientWidth < 335)? "333px" : "auto");
min-width: 333px;
}Here is how to set both maximum and minimum widths for IE 6:
#target_element {
width: expression((document.body.clientWidth < 335)? "333px" : (document.body.clientWidth > 778)? "777px" : "auto");
max-width: 333px;
min-width: 777px;
}To implement any of these techniques, simply replace all instances of 777 and/or 333 with the desired target min/max width(s). Then replace all instances of 778 and/or 335 with a value that is at least one pixel greater than your target value(s). This important step is frequently omitted from many min/max-width tutorials, and is required to prevent Internet Explorer from freezing up and crashing. See this comment for additional information.
Alternatively, as Robert Nyman points out, a better approach involves targeting IE 6 directly via externally executed JavaScript function:
window.onload = checkAvailableWidth;
window.onresize = checkAvailableWidth;
function checkAvailableWidth(){
var container = document.getElementById("container");
container.style.width = (document.body.clientWidth > 1100)? "1100px" : "auto";
}..which should be included via conditional comment:
<!--[if lt IE 7]>
<script type="text/javascript" src="/js/maxWidthFixForIE6.js"></script>
<![endif]-->There are several clear benefits to using this method for achieving minimum and maximum widths in IE 6:
- Valid CSS!
- Clean separation of behavior from presentation
- Vastly improved performance due to JavaScript’s use of event handlers. The CSS expression is recalculated continuously as the user interacts with the web page, while the JavaScript behavior is calculated only when the specified events (i.e., browser resize) occur.
Either way, it’s your choice which method to use when implementing minimum/maximum width for IE 6. If you know of an alternate method of achieving the effect, be kind and share a comment with us!
Next up..
Next in the CSS Hackz Series: PNG Image Display for Internet Explorer!
10 responses to “CSS Hackz Series: Minimum Width, Maximum Width for Internet Explorer 6”
I’m trying your hack for maximum-width, inside the container div I have a swf which is set to be 100% width. It doesn’t appear, so doesn’t seem to work with flash objects…
Any suggestions?
The hack works fine in the same scenario if I simply remove the swf and add some lines inside the div. Another thing I found is that I have set the margin for container to “0 auto” in order to have it centered, when applying your hack, the div goes to the left, doesn’t remain centered.
Hi Purpurina, you may want to experiment with various JavaScript approaches for facilitating the proper display of your Flash content. A robust library such as jQuery or Prototype should provide the additional tools you need to get Internet Explorer to behave.. I have also seen a few independent (standalone) scripts that may help; try searching for “minimum maximum width javascript ie” for more information.
Great post. I wonder if you’ve ever ran into a situation like this, however…
I need to set a min-width for IE6, but I’ve got a flash object whose width is 100%. Even if I offset the values in the width property like you describe, IE6 freezes up every single time when I resize the window. Any ideas on how to work around that?
@Ben: This issue may be the result of padding and/or margins applied to the target element. See this article for more information.
Call me crazy, but I don’t think you have to go to such extremes for min-width. Last I checked, IE ignores width when the width of the content is bigger than the set width. All you need to do (if you have a separate IE6 stylesheet) is this:
width: 778px;And IE6 behaves as if this meant min-width.
Hi Perishable,
Wanted to let you know that your hack series min-max works! Even though this has been posted years ago! I’m going crazy for the css design I’m doing (without tables), because the background of the divs that only have percentage for their widths gets their background chopped by some other divs that have fixed or specified widths, even the contents is completely chopped when the IE is minimized.
Hope that you’ll have plenty more(Knowledge!) to post like this one!
Thanks!
@Chad Garrett,
There is a difference, as to widths that has a value of *percent and with a fixed/specified one such as *px.
Your previous post in 2007 on this subject was a Godsend. I struggled for more than 8 hours to get the max-width trick to work in firefox and chrome, and your site was the only one I found that fixed my issue.
Now I’m trying to get it to work in IE 6 and it’s just not working.
I’m trying to make it so that all images larger than 400px in my blog downsize to 400px. Here’s the code I’m using:
.post-body img {max-width: 400px;height: auto !important;}.post-body img {width: expression((document.body.clientWidth > 401)? "400px" : "auto");max-width: 400px;}In firefox, my images appear normally — properly downsized to
400px, but in IE, my images are actually larger and improperly distorted.I have no idea what I’m doing wrong. I’ve tried combining the codes, separating them (as seen above), but it’s just not working.
P.S. the javascript fixes cannot work for me as Blogger does not allow javascript in blog templates.
LOL: I spent half of my college career studying computer science
Chad needs to go back to school and learn how to read.
It works! Great share, thank you. However, IE6 should be completly disabled as we all have problems with IE6 hacks…. wrrr :)
max width in ie6:
a simpel div container wrapping the
max value needed like:
#wrapmax{width:400px;}#divinsidewrap{max-width:400px;}<div id="wrapmax"><div id="divinsidewrap">blabla max400</div></div>