CSS Browser Hacks

I searched for a long time on how to hack different browsers in CSS so I thought I’d post techniques for the 3 most popular browsers (IE6, IE7 & Firefox).

The Technique:

I strongly recommend writing CSS and testing it in Firefox. Get it to look right, then hack out IE6 & IE7. Nothing against any of the browsers but this has been the most effective technique for me. You will usually need to make several adjustments to widths and heights, padding and margints, etc in IE6 and IE7 should follow pretty much what Firefox does. There are a few exceptions like floating and positioning that I’ve found.

Examples:

Let’s take a list of links for example. We have a ul, a li, and an a tag involved in a list of links.

Here’s the general CSS:

ul {
    border:1px solid black;
    list-style-type:none;
}
ul li {
    list-style-type:none;
    background-color:#dddddd;
    margin-left:0px;
}
ul li.active {
    list-style-type:none;
    background-color:#0000FF;
}
ul li a {
    text-decoration:none;
    font-weight:bold;
    color:#000000;
}

This should work fine in FF. This is just a fake example though. The thing I want you to notice is the margin-left:0px; in the ul li portion. I want there to be no indentation in the list, just a vertical list of links. Also, I don’t want any list style. The problem I often run into is that the margin-left:0px; does not work in other browsers. Here is the same CSS with an IE6 hack in the ul li portion:

ul {
    border:1px solid black;
    list-style-type:none;
}
ul li {
    list-style-type:none;
    background-color:#dddddd;
    margin-left:0px;
}
* html ul li {
    margin-left:-10px;
}
ul li.active {
    list-style-type:none;
    background-color:#0000FF;
}
ul li a {
    text-decoration:none;
    font-weight:bold;
    color:#000000;
}

Notice the “* html” before the “ul li”. Also notice that only margin-left:-10px; is there. This is because IE6 will pick up the attributes from the original “ul li” declaration and will overwrite the margin-left:0px with margin-left:-10px. Firefox and IE7 will not read the * html ul li.

Now, here is an example with a hack for IE7:

ul {
    border:1px solid black;
    list-style-type:none;
}
ul li {
    list-style-type:none;
    background-color:#dddddd;
    margin-left:0px;
}
*:first-child+html ul li {
    margin-left:-10px;
}
ul li.active {
    list-style-type:none;
    background-color:#0000FF;
}
ul li a {
    text-decoration:none;
    font-weight:bold;
    color:#000000;
}

Notice the “*:first-child+html” before “ul li”. This takes advantage of the newly added support for seudo classes and combinators in IE7. Firefox will still not read this and I’m not 100% sure as to why. I believe it is the order of combination because there is nothing prior to the HTML tag and *:first-child+html is saying there is something before it.

Keep in mind that I did not take this CSS from an actual site, I just threw it together just now as an example. If you copy and paste this and it doesn’t work right, don’t say I didn’t warn you. It’s the concept I’m trying to get accross, not the actual code.

Final Tips:

• Use these hacks sparingly
• Make sure your CSS validates before implementing any hacks
• When you need to add a hack, make sure it is after the original declaration. If you put “* html ul li” before “ul li” whatever was in “* html ul li” will be overwritten because IE6 will read both and the last one to be read is what is used.
• Good luck!