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

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 2

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.