Oct/060
IE, Why must you persecute me!?
As the CSS at lijit.com evolves I find myself continually up against the uncompliant Internet Explorer. The flavor this week is min and max width height. As you may or may not be aware the truly standards compliant browsers allow you to set both min-width and max-width properties to give you the ability to have a fluid layout appropriate for multiple monitor sizes. After a little research I found out that IE does support javascript from within CSS of all things. This allows you to keep track of the size of the window and hack in changing the size of your element. The first solution I found was over at svendtofte.com showing this code:
[css]
#element {
width:expression(document.body.clientWidth < 800 ? "800px" : "auto");
}
[/css]
I thought this was a pain, but it worked, so I extended it to handle both min and max:
[css]
#element {
width:expression(document.body.clientWidth < 800 ? "800px" : document.body.clientWidth < 1200 ? "1200px" : "auto");
}
[/css]
I figured I was all set, then I played with it in IE and wham, it froze. After more research and I found a post at cameronmoll.com indicating that using this method can introduce a race condition and infinite loop in IE. The solution, change your math slightly!? *sigh* So, here's the final working CSS that will be introduced in the next Lijit release that will give you a fluid layout between 800 and 1200 pixels:
[css]
#element {
min-width: 800px;
max-width: 1200px;
width:expression(document.body.clientWidth < 800 ? "800px" : document.body.clientWidth < 1200 ? "1200px" : "auto");
}
[/css]