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-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-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-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-block-10, x:-moz-any-link { /* target only Firefox, overriding the style above */ margin-top: 20px; } #block-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-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 across.