CSS hack to minimize position differences between Firefox, IE6 & IE7

Writting a good CSS can be annoying when we try to show the exact same page on Firefox, Internet Explorer 6 and Internet Explorer 7.

Each browser has a different way to parse the CSS code, showing sometimes little, and sometimes huge differences on the elements positions.

For example, the margin property doesn’t work the same on FF and IE7. The first applies the margin related to their parent elements, and IE7 related to the “same level” elements.

This little hack will allow us to write different attributes for each browser, or to show deliberated differences:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* Firefox class */ 
.element { 
margin: 10px 10px 10px 10px; 
background-color: #f00; 
} 
 
/* IE7 Class */ 
*:first-child+html .element { 
margin: 5px 5px 5px 5px; 
background-color: #0f0; 
} 
 
/* IE6 Class */ 
* html .element { 
margin: 2px 2px 2px 2px; 
background-color: #00f; 
}

If we assign this class to an element, for example <div class=”element”>, each browser will take the one that fits to it, in this case, a red background for firefox, a green background for IE7 and a blue background for IE6. Each class has different margin values, correcting the position differences that could exist in the page distribution.