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">
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.
Good point, though it readability may suffer as you’re trying to make your way through a large stylesheet.
For those interested, evolt.org has an article on some tips and tricks.
i am using a same css for both so i am facing some problem.
Pls can you gide me in making seperate css for mozilla
thnx for the code
Leave a comment