Home/ Questions/Q 6184583
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T01:33:42+00:00

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

  • 0

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:

This sucks

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:

enter image description here

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0