views:

1108

answers:

11

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

A: 

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

Darren Kopp
+7  A: 
foo { min-width: 100px }      // for everyone
* html foo { width: 100px }   // just for IE

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

kch
This does not provide a min width in IE. You are effectively just giving up on IE...
Prestaul
Prestaul, IE6 treats width as min-width.
Magnar
My understanding is that this will work in IE6, but not IE7: http://blog.throbs.net/2006/11/17/IE7+And+MinWidth+.aspx
Prestaul
The same fix applied to min-height seems to work in both IE6 and IE7 for me!
Christoph Schiessl
This solution does not seems to be working with IE8.
Nordes
min-* works in IE 8. Maybe you should post a new question detailing your specific problem.
kch
Nice, but in some cases IE6 does treat `width` as `width` (and not `min-width`). This sometimes works for me, and sometimes doesn't.
orip
+1  A: 

This works pretty well...

div.container {
    min-width: 760px; 
    width:expression(document.body.clientWidth < 760? "760px": "auto" ); 
}
Hugoware
That CSS will not validate to W3C standards. Plus it can cause undesired effects [http://www.456bereastreet.com/archive/200611/ie_expressions_ignore_css_media_types]. Also, CSS should only have presentation, not behaviour.
Rich Adams
Who cares if it will validate or not, this stuff can crash a users browser. It's very easy to end up in an infinite loop situation, since expressions are evaluated on virtually all events, such as reflow events, and the expression itself also causes a reflow. If extreme care is not taken, the reflow event can bubble back to the element the expression is bound to.
Svend
+1  A: 

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.

Rich Adams
+3  A: 

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.

Prestaul
Nice one, very crafty
Chris Serra
A: 

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

John Sheehan
A: 

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");
mmcglynn
See Hugoware's answer as to why expressions that do this are bad.
Svend
+1  A: 

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).

Mike
A: 
zwerd328
+1  A: 

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

Dean Peters
A: 

Single line button

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