Dealing with Firefox and Internet Explorer's Differences

Question

This question is because I just found out that my site is looking ok in IE7 and in IE8 with compatibility-mode, but in FF it is all screwed up.

What would be the bes

Answer 1

A lot of cross-browser issues amount to this: you didn't specify something, and different browsers make different assumptions. Therefore:

Declare a valid doctype

Your doctype tells the browser what rules you'll be using in your code. If you don't specify, the browser has to guess, and different browsers will guess differently.

In my experience, a "strict" doctype makes IE behave better (enables things like CSS :hover selectors on divs in IE7).

This article gives good background on doctypes.

Validate your HTML and CSS

You don't have to get everything perfect, but validation is good feedback. As Jeff said:

Knowing the rules and boundaries helps you define what you're doing, and gives you legitimate ammunition for agreeing or disagreeing. You can make an informed choice, instead of a random "I just do this and it works" one.

Imagine you opened a paragraph tag and never closed it. If you then open a list tag, did you mean it to be inside the paragraph or not? Validating will help you catch that, close the tag, and eliminate ambiguity.

Consider a CSS Reset

Different browsers assume different baseline CSS rules. You can help them all to act the same by explicitly ironing out the differences up front. Eric Meyer, who wrote CSS: The Definitive Guide, uses this reset.

Test in multiple browsers, deal with IE last

Test in multiple browsers as you go. Generally, you'll find that non-IE browsers behave similarly and IE is a special case - especially if you follow the advice above. When necessary, you can add IE hacks in a separate stylesheet and only load it for IE users.

Quirksmode.com is a good place for hunting down random browser differences.