5 CSS Tips to Make IE (You) Happy

If I could, I’d give you a special present this christmas – I’d tell you how to make IE on Windows behave like a grown-up browser. Sadly, reality sucks – as does IE on Windows – so I can only offer to share with you a couple of CSS tips to ease the pain of working with that piece of crappy software.

1. Reset browser styles

To start off with the right leg, I suggest you reset the styles to some sensitive defaults, so all browsers will render the page as similarly as possible. To do so, you can use one of the many suggested templates to create a reset.css file and include it before you include any other of your style sheets.

2. Add IE 5.5+ png file support

Angus Turnbull over at TwinHelix has written a nice htc script to bring png images support to IE 5.5+. To use it, simply add the following css code into your ie.css file, which you’ve previously included with IE conditional comments – you do use conditional comments, right?

img, h1, .class-with-png-background-image {
    behavior: url(../htc/iepngfix.htc);
}

I won’t go deep into explaining how this works as you can easily find more info on the author’s site. Suffice to say that you need to call the iepngfix.htc file as an ie-only dhtml behaviour attribute on the img element and/or any other element where you may want to use png background images on.
The only problem with this script that I’ve found so far, is that it won’t work with repeating background images.
Also you should make sure that the server is configured to serve .htc files correctly. If the script doesn’t work, all you need to do is to add the following line to your .htaccess file, and you should be good to go:

AddType text/x-component .htc

3. Add IE < 7 custom :hover support

Another annoying IE problem is that it doesn’t support css :hover events on elements other than links. This can be easily solved with another .htc script, this time written by Peter Nederlof and you can download it on the Whatever:hover script page.
This script is even easier to use than the png trick, because all it takes is one line in your ie-specific css file:

body { behavior:url("../htc/csshover.htc"); }

4. “Give layout” to elements

The source of most of Internet Explorer’s bugs comes from an IE-only property called layout. An element can either have layout or not, which determines how an element is rendered by the browser. Most of IE bugs can be squashed by giving layout to the offending element, which is done simply by assigning one of the following properties to that element:

position: absolute [IE 6 & 7]
float: left [IE 6 & 7]
float: right [IE 6 & 7]
display: inline-table [IE 6 & 7]
any width or height value [IE 6 & 7]
zoom [IE 6 & 7]
min-width [IE 7]
max-width [IE 7]
min-height [IE 7]
max-height [IE 7]
overflow [IE 7]

Among these, the most common way to “give layout” to an element – and thus, eliminate the bug – is to assign the following rule:

#the-buggy-element { height: 1%; }

However, if the problem persists, you might want to add a “position” to that element. This fixes the problem more often than not.

#the-buggy-element {
    position: relative;
    height: 1%;
}

An exhaustive article on having layout can be found at http://www.satzansatz.de/cssd/onhavinglayout.html.

5. Prevent the double margin bug from crumbling your layout

This one has saved me a lot of headaches, because IE 6 has a tendency to double the margins of every element, which has been floated and assigned a left/right margin. To overcome this bug, simply set display: inline on the offending element. This will magically make the bug disappear with no adverse effects on your layout.

If you’ve found these tips useful and your future IE-development experience somewhat more pleasant, I invite you to share your thoughts by commenting below.

This entry was posted on Tuesday, December 25th, 2007 at 9:16 pm. You can follow any comments through the RSS feed. Both comments and pings are currently closed.