Cross-Browser CSS

Browser differences are a fact

Although they are supposed to give a similar end result, the W3C specifications browser-makers follow are 'recommendations' and not ultimatums. There is room for negotiation, and whichever browser maker you are loyal to has taken the liberty of defining default styles to items which you may not be aware of. There comes a time when you realize you're having more difficulties than you should. Separating content and layout is supposed to lead to less browser fussiness, right?

Level the Playing field

As a designer, you need to be aware of styling differences and take steps to get browsers agreeing before adding embellishment to your markup. This article goes over the importants of keeping the browser out of the legacy quirks mode and using simple CSS rules to initialize compliant browsers into a common style. For example, you may have noticed on certain sites that Opera renders an unordered list way to the left of the position Mozilla Firefox and IE render it. This issue is totally avoidable with very little effort. You may want to look at information on neutralizing the default CSS of different browsers.

Using :hover

Once you get used to CSS for styling you begin to appreciate the :hover pseudo-class much more. Except when you load the page in IE, which only supports a:hover. PeterNed has written an IE behavior, which is basically a JavaScript globally applied to specific tags, that solves this issue quite cleanly. Absolute purists be warned: it is a slippery slope into browser-specific styles. I would not suggest including this in your base template for a website, but when you really need the capacity, it is available. Hopefully IE7 will take away the need for this hack.

Stay Current

Surely the task of tracking CSS bugs as they are released is too huge for one person. So don't worry about it, just check positioniseverything.net every once in a while and get the info you need.

Archived at my site