It appears Firefox adds 3px to the top of most elements, compared to IE9

Question

Yet another "Firefox does not agree with IE9" and the other way around problem.

I could explain what is going on, but an image says more than a thousand words, so I took a screenie of FF and IE:

Here is the markup:

<div align="center" id="cmContainer" style="background-color: #8CFE70; border: 1px solid #2D9500; border-radius: 4px; width: 400px; height: 161px;"> 
   <span style="color: #2C2C2C; font-family: Arial; font-size: 20px; text-align: center;" /> 
   <font size="24">Look!</font>
   <br>
   See how different IE renders from FF?
   <br>
   How can I fix this?
   </span>
   <br>
   <input value="CODE" type="text" size="20" style="font: 20px Arial; color: #000000; background-color: #F3F3F3; border: 1px solid #8D8D8D; width: 300px; border-radius: 2px; text-align: center; margin-top: 0px; padding: 5px 3px 5px 3px; " />
   <br>
   <input type="button" value="I'm a button!" />
</div>

What can be causing it? I have tried several different stuff with Firebug, but to no avail.

Why does web development have to be this annoying? :)

P.S:Before commenting about my use of Inline Styles, please note that it is how my project requires it. :)

EDIT: By using a CSS Reset, as suggested by Cygal and Christophe, and by applying it only on my objects, here is the result:

Cant really ask for anything better, as easwee so nicely pointed out. ;)

Answer 1

I think it comes from border that firefox doesn't count in the global height of the element in opposition to IE that integrate borders in elem height...

So, the difference should be 3px between them because the last border-bottom does not affect the rest.

Edit

Have you tried to use a CSS reset like : http://meyerweb.com/eric/tools/css/reset/

Answer 2

The issue

There is no specification regarding the default margin, padding, border and font-size of default elements. Here, it appears that the margin of your title is bigger in Firefox than in IE9. Note that every solution that only fixes this specific problem will not prevent it from appearing in other places.

The solution

• Reset CSS: if you do want to have exactly the same rendering, you can use a technique called "reset CSS" which sets everything to zero everywhere it makes sense. It is then up to you to choose the values you want. You could try the Eric Meyers's reset CSS or other ones.
• Base stylesheet: reseting the CSS could and will have unexpected effects on your style: the effects could be surprising and there is a reason why the browser have default values for elements. If you only want to correct "know incompatibility issues", then you can use a simple base stylesheet (this one exists in both compact and full modes).

However, remember that it's OK if every website doesn't appear the same on every browser, and that it won't appear the same anyway due to issues you can't control (mainly due the size of the fonts chosen by users and old browsers). Another solution would then be to let go and use techniques like sizes in em. (and not in piexels) when appropriate. :)