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.




5 Comments

I personally still favor the use of one stylesheet…much more maintainable. But I do agree that IE implements CSS a little strange sometimes. There’s always little hacks that you can throw in to keep IE happy though…like the !important which IE will ignore. Here’s an example:

min-height: 300px; /* For Gecko browsers */
height:auto !important; /* For Gecko browsers */
height: 300px; /* For IE */

Since IE doesn’t support min-height or height being “auto”, you add !important. Firefox, Safari and others will set the rule and not allow it to be overwritten by another height rule. IE ignores lines 1 and 2 and then has its height set on line 3.

Leave a Reply