Browser specific CSS

Found an interesting thread on CSS hacks here
I have tried to summarize few interesting things from the really long thread.

The difference in CSS rendering is a common problem between IE and FireFox. We need to write browser specific CSS to solve the problem. There are two ways to implement browser specific CSS code rendering.

By using conditional tags for different browsers

This approach is promoted more by MS for CSS behaviour changes in IE7. The idea is to create seperate versions of CSS code for specific browsers and use the conditional tags to include/exclude them in rendering our page. Following are few conditional tags.

<!--[if IE]-->

IE specific CSS goes here

<!--[endif]-->

<!--[if lt IE 7]>

Code valid upto version 6 of IE

<!--[endif]-->

By using CSS code that's ignored by certain browsers and accepted by others

The idea is to use keywords that are ignored by certain browsers, thereby only the intended browser will evaluate the rule.

After each rule, add a second rule. The selector of the second rule must use a child selector. In this new rule, correct any IE-specific declarations previously made. First is IE, 2nd is Firefox as IE doesn't understand the second rule containing "body >", "html > body".

Example A:

div#header {margin-top:-3px;}

body > div#header {margin-top:0;}

Example B: 

.promo h3 {height:21px;}

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

Example C:

ol {padding:0 0 0 5px;}

html > body ol {padding:0;}