Cross-browser CSS

I must admit – it’s only been recently that I began creating sites almost exclusively favoring CSS over table layouts. I’m starting to get it, and it’s great! There’s one problem with using CSS: different browsers render pages differently… very differently in some cases.

I choose Safari and Firefox when I’m first building a layout because I know they adhere to standards (Number 1 and 3 top “winners” of the Acid2 tests, respectively). As one would expect, Internet Explorer has some rendering issues issues. But why do I say that? Firefox, Opera, and Safari generally render pages quite consistently, whereas IE does not.

Here are some general tips that I’ve learned over the last few months now that I’m becoming more of a HTML/CSS jockey again.

• Do initial development for Safari, Opera, and Firefox (SOF).
• Keep separate stylesheets: One for IE, and another for SOF (or other Acid2-compliant browsers)
• Use browser detection to load the proper stylesheet(s). Server-side or javascript work.
• Be patient. Don’t be frustrated if you can’t get both versions to look *exactly* alike. There’s often a level that’s “good enough.”

Browser detection script…

<script language="JavaScript">
var browser=navigator.appName
if(browser =="Microsoft Internet Explorer")
{
document.write('<link href="/path/to/stylesheet_ie.css" rel="stylesheet" type="text/css">')
}
else
{
document.write('<link href="/path/to/stylesheet.css" rel="stylesheet" type="text/css">')
}
</script>
<noscript>
<link href="/path/to/stylesheet_ie.css" rel="stylesheet" type="text/css">
</noscript>

Notice that I chose the Internet Explorer stylesheet as my default if no javascript is enabled. It’s simply because the market is dominated by IE and not Firefox, so the odds are in your favor.