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.

Answer 2

First, run your css through the css validator. This will help you make sure that your css is compatible with standards supporting browsers, take any advice it gives you to improve your css. As soon as you pass the css validator you can then see if there are any browser specific bugs.

Answer 3

There are often ways to make your css compliant with both browsers. This takes a little bit of time, but makes it easier to maintain things later. So if you have the time, I recommend trying to find ways to implement all elements in that fashion.

I often run into this when centering objects. Most recently I was specifically having problems with a table for a web-portal. Googling "css centering table" yielded table centering using html or css. Using this same approach you should be able to figure out how to reconcile the browser discrepancies.

Answer 4

Clearing all styles and making every browser a blank slate is ideal and should be done - but coding for every single browser is simply not possible. You cannot make a website with CSS that will look 100% exactly the same in every single browser unless you code everything to be pixel based, and even then you'll end up with issues based on IE's interpretation of padding and margins. A pixel isn't always a pixel.

That said, my solution, as a CSS implementer since the beginning, is to first clear all padding and margins, which cause most of the problems, in your main CSS file.

* { padding: 0; margin: 0; }

Then create your site as you would normally - ideally coding for Firefox initially as there are hacks you can use for Safari and all versions of IE. Depending on the "render like IE _" is unacceptable. Check your site in IE 6, 7, 8 (use IE Tester if you have to), Firefox, and Safari simultaneously. Try to make as many minor changes as possible to get them all looking very close to the same. Then go in and address the minor remaining issues (at this point you may only have one or two per browser - if any).

<!--[if IE 6]><link href="css/CSSName_IE6.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 7]><link href="css/CSSName_IE7.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 8]><link href="css/CSSName_IE8.css" rel="stylesheet" type="text/css"><![endif]-->

Once you have created your primary style sheet with all the styles for your entire site create conditional comments for separate stylesheets for IE 6, 7, and 8 where you only override those attributes that need overriding.

e.g. If you need to adjust the font size from the normal .8 em for Firefox to .7 em for IE 6 but your particular selector has 12 other attributes, only put that single attribute override in the conditional stylesheet. Don't overwrite the entire style with all attributes. It's unnecessary.

Master CSS

.iframestyle { float: left; margin-right: 3px; width: 305px; }

IE 6

.iframestyle { width: 309px; height: 263px; }

IE 7

.iframestyle { width: 309px; margin-top: 0px; }

IE 8

.iframestyle { width: 305px; margin-top: 0px; }

Hopefully that helps better show what I mean (and yes, in IE 8 the width had to be stated again as it picked up the other IE styles for whatever reason).

Answer 5

For the love of god (and your hairline) develop in FF/Webkit first and then make your tweaks to get it to work in the IE family.

When needed, I prefer hacks in the CSS doc (* html .foo) to conditional comments because the thought of putting MS specific markup into my HTML makes me queasy.

Answer 6

Separate files for just the browser specific parts of your css. And use html conditional statements to switch between them.

<link type="text/css" href="style.css" />
<!--[If IE]>
    <link type="text/css" href="IEHacks.css" />
<![endif]-->
<!--[if !IE]>
    <link type="text/css" href="NonIEHacks.css" />
<!--<![endif]-->

MSDN article about conditional comments, including list of accepted test values