Writing Cross Browser Friendly CSS (Mozilla vs. IE)

Yesterday, a web designer approached me with a rather common question relating to CSS. He wanted to know why his CSS code looks great in Internet Explorer, but horrid in Mozilla Firefox and even Safari. He had designed a killer website for his company (I must say!) and the only drawback was the problem with cross-browser compatibility. He didn’t understand why he was experiencing these problems because he knew that all of his XHTML and CSS code was valid and he even checked all of his CSS code with the W3C to make sure that it was tested against their standards in CSS development.

What many web designers do not understand is that every web browser uses their own standards in their rendering engine. Microsoft has a very unique rendering engine unlike anyone else, but are beginning to follow the W3C’s standards in their recent release of Internet Explorer 7. Firefox’s rendering engine is based off of Mozilla’s standards, which follow very closely with those recommended by the W3C. Safari’s rendering engine is based off of the Open Source Gecko engine also used in Konqueror, a popular Linux web browser. The problem with these rendering engines is that they don’t follow the same rules–what looks right in IE might look terrible in FireFox, Safari, and so on.

I always recommend designing your website in Mozilla Firefox. It is simply the greatest common denominator. I have found, in my experience, that if you design your website in Firefox, it “usually” requires less recoding to behave in other browsers.Let me share some of his troubles with you and walk you through how we resolved the following issues:

• “Oh, my god! My DIV doesn’t center in Firefox like it does in Internet Explorer!”

Okay, this is a very simple fix and I can pretty much guess what you are doing wrong. Most likely, your style looks like this:

box {
width = 720px;
text-align = “center”;
}

The text-align reference, although seems to behave fine in Internet Explorer, is not valid for this kind of element. The W3C recommends that the text-align tag be exclusively used for text, so other browsers are not going to center an entire DIV for you. Also, remember that adding <div align=”center” id=”box”> to your HTML code isn’t going to work either for the same reason. To accomplish this problem, you need to actually change this to the following code:

box {
width = 720px;
margin: 0 auto;
}

• “Oh crap! My DIV looks great in Internet Explorer, but awful in Firefox. What do I do?”

To render an item solely in Firefox (and it not effect other browsers, simply add a -moz- in front of the tag. Let me demonstrate:

box {
width = 720px;
margin: 0 auto;
-moz-margin-top: 3px; // For Firefox
margin-top: 4px; // For other browsers
}

• “Oh no! Now it’s the other way around. It looks great on Firefox, but bad on Internet Explorer!”

Easy fix! The problem with Microsoft is that they sometimes add some default elements to your styles that other browsers do not add. The “!important” tag tells your browser to take precedence over the all of the other tags. Normally in CSS, the last style added takes precedence, thus they are “cascading”. The “!important” tag overrides this cascading behavior and sets a default for that style which cannot be overridden. Here is how you do this:

box {
width = 720px;
margin: 0 auto;
-moz-margin-top: 3em; // For Firefox
margin-top: 8em !important; // For Internet Explorer
margin-top: 4em; // For other browsers
}

• “But I wanna assign an entire other style for those who use IE!”

That’s not a problem. Simply do this:

.topMennu{
width: 700px;
}

.top\Menu{
width: 720px;
}

So, to make a long story short he lived happily ever after with the fabulous new tricks I taught him. Do you have any tricks you’d like to add?