CSS Design Concerns for IE6, IE7, and Firefox

Below is the beginning of (hopefully) an ongoing collection of design-related CSS issues concerning different browsers. For this initial posting, I focus on Firefox, IE6, and IE7.

The good news regarding IE7 is that a lot of bugs were fixed. See the following for a list of fixes.

Unfortunately, those improvements leave a fairly large gap between how IE6 and IE7 render the same CSS. See http://kimblim.dk/csstest/ for a good look at CSS testing of Selector and Pseudo-selectors for Firefox, IE6, IE7b3, and Safari. You will notice that IE7 and Firefox display more similarly than IE7 does with IE6.

If you looked through the above site, you noticed that IE6 did not properly display any of the Selectors and Pseudo-selectors that were tested. In an effort to demonstrate some of the steps that can be taken to make the same page (or element within a page) display similarly across IE6, IE7, and Firefox, I listed some workarounds (min/max-width, inline vs. block-level elements) for a few of the tested Selectors and Pseudo-selectors. You will find them at: http://www.sscnet.ucla.edu/ssc/lederman/browser_design_issues_1.html.

Some general ways to deal with IE6:

In an effort to have your web pages validate, use Conditional Comments to write browser specific rules/code, etc. You can find more info at: http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp.

When using Conditional Comments, make sure that the links for them come later than the main CSS file link in the coding, AND that the rules within the Conditional Comment have at least the same or higher specificity than any similar rules in the main sheet. Otherwise, the rules in the Conditional Comments will not override the main CSS.

Though not an ideal solution, hacks can be helpful at times. A list of CSS hacks.

Two common hacks, the Star HTML hack and the Underscore hack, both IE-specific, (you can see a list of common hacks specific to which browsers at http://www.centricle.com/ref/css/filters), can be avoided using the following approach:

Write a rule, adding the IE-specific declaration.

.title h3 { height: 21px; }

After each rule, add a second rule using a child selector. This is key because IE6 will ignore this rule, but Firefox and IE7 will apply it.

.title h3 {height: 21px; }
.title > h3 {height: auto; min-height: 21px; }

Though this leaves your CSS a bit bloated, it is an approach that avoids using these two common hacks in favor of a CSS-based solution. I should note that I haven�t tested this approach yet using really complicated coding. I�ve read that the above method requires you to be operating in strict mode, however, I found the method to work just fine (as far as I tested it) while in transitional mode. Test away!