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)
- 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…
if(browser =="Microsoft Internet Explorer")
document.write('<link href="/path/to/stylesheet_ie.css" rel="stylesheet" type="text/css">')
document.write('<link href="/path/to/stylesheet.css" rel="stylesheet" type="text/css">')
<link href="/path/to/stylesheet_ie.css" rel="stylesheet" type="text/css">