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

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

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