Firefox CSS Hack

Going further into browser hacking just to make sure that everything displays as they should be in every browser that we are targeting.

Lately, I came to face this 1 pixel difference between IE8 and firefox displays - padding-top in particular.

I keep on trying to come up with a hack for IE 8 as I have done the IE 7/6 hack and they seem to work fine even if I changes the values for the padding.

Since I wasn't really able to come up with the correct formula to have a code that could fix the issue in IE8 and still works fine in firefox, I decided to come up with a firefox hack then IE 8, 7, and 6 hacks. Maybe the next time I could find a shorter way to do things.

By the way, here is the sample code that I had for the given scenario.

div#loginstatus a {
float:right;
padding-right:5px;
padding-top:3px; /*IE 8 will use this hack */
color: #fff;
text-decoration:none;
}

/*try to fix firefox - failsafe
html>body div#loginstatus a {
padding-top:2px;
}*/
/* firefox will use the hack below */
html>/**/body div#loginstatus a, x:-moz-any-link, x:default { padding-top:2px; }

/* IE 7 hack */
*+html #loginstatus a{
padding-top:2px;
}

/*IE6 hack only*/
* html #loginstatus a{
padding-top:2px;
}