Dealing with Firefox and Internet Explorer's Differences

Question

Hello,

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 best way to go about it.

Separate CSS files?

Thanks, Richard

Answer 1

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

Answer 2

If your layouts are radically different, the best solution would be to go back and re-think your Layout/CSS. In all honesty, I have never needed two styles sheets - one for FF, and another for IE.

One very helpful tool is a "reset stylesheet", like the one Eric Meyer provides. This resets much of your elements to a state that is consistent between multiple browsers.

Thoughtful and patient development can result in a single stylesheet (being simplistic here, not considering reset.css, text.css, etc.) that will work for both FF and IE.

I would suggest you download Firebug, a firefox addon, and start working your way through your styles. It will be helpful to install the IE Developer Toolbar too - kinda the Firebug of IE. And if you want to test multiple versions of IE simultaenously, check out IETester.

Designing a site is a tedious process - don't take short cuts :) Train yourself to be hard-up when it comes to layouts. Don't settle for any compromises - it'll benefit you in the long run!

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

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 5

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 6

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 7

For best results do your development in Firefox (because it is standards compliant) and periodically cross-browser check in different versions of IE to make sure it works OK there too.

You shouldn't need to have a completely separate CSS file for IE, but in a complicated layout you may need to have a small set of overriding rules to make IE behave - expose those rules to IE only with IE Conditional Comments. Never use CSS hacks, they are unnecessary and error prone.

Answer 8

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).