Check here to be added to my mailing list.

I will not sell or distribute your contact information ever, for any reason.

liquid layouts - meet ie6 min-width fix.

In looking around for an ie6 min-width fix, I found that most of the other stuff out there was inconclusive, or relied on using an image tag to fix the issue. What I've come up with is just a small evolution on the image tag method, in that it doesn't add an http request to get the image.


What we're mainly doing here is using a 1 pixel high block element to hold the width


Your html would look like this:

<div class="someContainer">
<div class="minWidthSpacer"></div>
</div>


And this css would go somewhere in your style sheet, and just adjust the 950px width to whatever you actually want your min-width to be.


.minWidthSpacer {
width: 950px;
height: 1px;
line-height: 1px;
display: block;
}


If you're worried about that 1 pixel throwing off your layout stuff, or just don't want the thing there on browsers where it's not needed, throw an ie6 specific display rule in there. Your call.


.minWidthSpacer {
width: 950px;
height: 1px;
line-height: 1px;
display: none;
_display: block;
/* this way the spacer will only show on ie6 */
}