Getting Around IE’s Lack of Min-Width Support

Min-width is a useful CSS property that, as it’s name suggests, sets the minimum width of an element to a specific pixel width (or em or whatever). It’s very useful.

The problem? Microsoft. Internet Exploder doesn’t support the property. Instead of ranting about Microsoft’s pathetic browser, I’ll skip to the solution…

First, make sure you have an IE-specific stylesheet to put all you IE hacks in. It makes it easier to manage things, and it makes sure hacks like this don’t stop your CSS from validating. (Believe me, this one will.) Include it in your page head like so:

<!--[if IE]><link rel="stylesheet" href="ieislame.css" type="text/css" media="all" /><![endif]-->

Next, add something along the lines of this to the file:

#mydiv { width:expression(document.body.clientWidth < 850? "850px": "auto" ); }

Just replace both instances of “850″ with the minimum width you prefer.

Not too hard, but it shouldn’t be necessary.

Tags: css, IE, Internet Explorer