What is the definitive way to mimic the CSS property min-width in Internet Explorer 6? Is it better not to try?
foo { min-width: 100px } // for everyone
* html foo { width: 100px } // just for IE
(or serve a separate stylesheet to IE using conditional comments)
This works pretty well...
div.container {
min-width: 760px;
width:expression(document.body.clientWidth < 760? "760px": "auto" );
}
This article on CSS Play, by Stu Nicholls, shows the different methods for achieving min-width in IE, in all modes (Quirks, etc) and even for IE/Mac.
You could use an expression (as suggested by HBoss), but if you are worried about performance then the best way to do this is to add a shim inside the element you want to apply a min-width to.
<div id="container">
The "shim" div will hold the container div open to at least 500px!
You should be able to put it anywhere in the container div.
<div class="shim">&nsbp;</div>
</div>
#container .shim {
width: 500px;
height: 0;
line-height: 0;
}
This requires a little non-semantic markup but is a truly cross-browser solution and doesn't require the overhead of using an expression.
Use conditional comments to reference and MSIE 6 specific style sheet, then create CSS as below.
Compliant browsers will use:
min-width: 660px;
Then MSIE 6 will use:
width: expression((document.body.clientWidth < 659)? "660px" : "auto");
I've fiddled with every answer given here in the past month. And after playing with Pretaul's method (http://stackoverflow.com/questions/93274/min-width-in-msie-6#93530), it seems to be the best alternative to min-width. No hacks or anything, just straight up compliant CSS code which takes 30 seconds to implement.
From Googling around, expressions seem to be the most popular. For me anyways, ittended to randomly lock up my browser (both IE and FF).
I dunno, I had some success with:
min-width: 193px;
width:auto !important;
_width: 193px; /* IE6 hack */
A combination of dustin diaz' min-height fast hack & http://is.gd/14BPS
Single line button
button{
background-color:#069;
float:left;
min-width:200px;
width:auto !important;
width:200px;
white-space: nowrap}