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�ll notice that IE7 and Firefox display more similarly than IE7 does with IE6.

If you looked through the above site, you noticed that IE6 didn�t 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 for a few of the tested Selectors and Pseudo-selectors. You�ll 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

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!