CSS hacks-IE8, IE7, IE6 and Firefox

ArticleDirectory

• Option 1: IE8 and Firefox using the same style, IE6 and IE7 using another
• Option 2: IE8 and Firefox using the same style, IE6 and IE7 using their own styles different to IE8 and Firefox.
• Option 3: similar to above, but if you need to target IE8 and Firefox separately.
• Option 4: similar to above, but if you need to target Firefox 3 and Firefox 2 separately.

Option 1: IE8 and Firefox using the same style, IE6 and IE7 using another

# Block {margin-top: 5px;/* target only IE8 + Firefox browsers */* margin-top: 10px;/* target only IE7 and older browsers */}

Option 2: IE8 and Firefox using the same style, IE6 and IE7 using their own styles different to IE8 and Firefox.

# Block {margin-top: 5px;/* target only IE8 + Firefox browsers */} * html # block {/* Target IE6 only */margin-top: 50px ;} * + html # block-10 {/* Target IE7 only */margin-top: 100px ;}

Option 3: similar to above, but if you need to target IE8 and Firefox separately.

# Block {margin-top: 5px;/* target only IE8 + Firefox browsers */} # block-10, X: -Moz-any-link {/* target only Firefox, overriding the style above */margin-top: 20px ;} * html # block {/* Target IE6 only */margin-top: 50px;} * + html # block-10 {/* Target IE7 only */margin-top: 100px ;}

Option 4: similar to above, but if you need to target Firefox 3 and Firefox 2 separately.

# Block {margin-top: 5px;/* target only IE8 + Firefox browsers */} # block-10, X: -Moz-any-link {/* target only Firefox, overriding the style above */margin-top: 20px;} # block-10, X: -Moz-any-link, X: Default {/* Targets firefox 3.0 and newer, overriding the style above */margin-top: 30px ;} * html # block {/* Target IE6 only */margin-top: 50px;} * + html # block-10 {/* Target IE7 only */margin-top: 100px ;}

Hopefully this makes sense, I have tested it so hopefully it works for you. Feel free to give feedback or other solutions you have come into your SS.