CSS tortures

Folks who code CSS know that they have to test for major browsers, i.e. IE6, IE7 and Firefox (Lord have mercy on us, when IE8 comes out. It's Beta now) before deployment, and the process? A total bitch to test for. Neil Kilbride shared some advice on this:

"Browser CSS Differences (IE6 IE7 Firefox), by Neil Kilbride, Tuesday, 22 January 2008

Typically the 3 major browsers used are Firefox, IE6 and IE7. Perhaps you thought they would behave the behave the same when rendering CSS in the browser window? If only life were that simple.
Although Firefox and IE7 and more similar than ever in rendering CSS, IE6 has always had a mind of its own, adding padding and spacing amongst other things in random locations. However, there is a simple way to cater specifically for the major browsers. IE6 recognises underscore lines, but IE7 does not. IE6 and IE7 recognise period lines. For example...

#header
{
margin-top: 8px;
.margin-top: 10px;
_margin-top: 4px;
}

Firefox, and every other non-IE browser, will only see and use the 8px, IE6 will see the 10px line, but then the 4px line will stomp on it, and only IE7 will see the 10px line. You can now support all major browsers without having to write a serverside script, clientside script or even a horrible CSS expression :)"

Visit DynamicDrive and FreeBits for other CSS tricks and kicks, e.g. inverted tabs.