When I ‘m creating a website, I like to use width and height and min-height to block the elements out on a layout. Well unfortunately when my IE clients would go see it, they’d be very confused and disappointed and I’d be embarrassed. I’ve since learned my lesson, and I found a few great hacks for IE.

Most important for me is conditional comment code. It is used in headers and it can apply any header code to any browser. I usually only need it to apply CSS to IE pages.

<!--[if IE 6]>
<style type="text/css">
/* detailed styles go here */
</style>
<![endif]-->

I place itemized, specific CSS styles in here, usually margins or padding styles to make up for IE’s box model problems. And of course it’s much more effective if you just link to an IE-specific style sheet rather than have to change styles on all pages.

But even more effective than separate styles to handle IE problems are using the built-in CSS hacks. For example, for the height and min-height problems, IE does not recognize the min-height element. But it does read a style that starts with an underscore, such as _height. So in this instance you can forgo the separate style definitions and use code like the following:

div#box {
min-height:500px;
_height:500px;
overflow:auto;
}

An excellent reference for CSS hacks is this interactive spreadsheet from Centricle. This shows standard Mac and Windows browsers and their compatibility with CSS rules. It can even follow your mouse and highlight the row and column you are hovered over. A great bookmark!

Advertisements