Min-width in MSIE 6

Question

What is the definitive way to mimic the CSS property min-width in Internet Explorer 6? Is it better not to try?

Answer 1

foo { min-width: 100px }      // for everyone
* html foo { width: 100px }   // just for IE

(or serve a separate stylesheet to IE using conditional comments)

Answer 2

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">&nbsp;</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.

Answer 3

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.

Answer 4

I've fiddled with every answer given here in the past month. And after playing with Pretaul's method (Min-width in MSIE 6), 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).

Answer 5

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 & How do I specify in HTML or CSS the absolute minimum width of a table cell

Answer 6

do your css tag as _Width: 500px or whatever.

Answer 7

This works pretty well...

div.container {
    min-width: 760px; 
    width:expression(document.body.clientWidth < 760? "760px": "auto" ); 
}

Answer 8

Min-height fast hack works for me (also works for width)

Answer 9

The shim example is fine for forcing the browser to show a horizontal scroll bar when the container gets to a certain size but you'll notice that the content in the container will still be resized as the window gets smaller. I imagine that this is not the overall goal when trying to achieve minimum width in IE 6.

Incomplete min-width technique http://www.mediafire.com/imgbnc.php/260264acec99b5aba3e77c1c4cdc54e94g.jpg

Furthermore, the use of expressions and other crazy CSS hacks just isn't good practice. They are unsafe and unclean. This article explains the caveats of CSS hacks and why they should be avoided altogether.

I personally consider scaryjeff's post to be the best advice for achieving true min-width in IE6 and as an experienced CSS layout developer I've yet to find a better solution that is as applicable to problems of this kind.

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.

I've provided an answer to a similar question that details the use of this technique to correctly achieve min-width. It can be viewed here:

CSS: Two 50% fluid columns not respecting min width

The technique is simple, valid CSS that can be used in almost any situation. Applied to the shim example above it results in what I consider to be correct min-width functionality.

Correct min-width technique http://www.mediafire.com/imgbnc.php/a67b2820bfbd6a5b588bea23c4c0462f4g.jpg

Answer 10

Single line button

button{
background-color:#069;
float:left;
min-width:200px;
width:auto !important;
width:200px;
white-space: nowrap}

Answer 11

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");