There are many differences between firefox and IE in terms of parsing CSS file and rendering web page.
When I built this site, I suffered the pain, that when I designed a HTML page with a CSS style, it looks pretty fine in Microsoft’s IE but terrible in Firefox. Here is an example, people often use nested “<div>” tag in their HTML file and so do I. If you also do such things and hope people have good experiences when browse your website using Firefox you should be careful with your CSS style design.
For instance, if you write the HTML file is like below:
<div id="container"> <div id="navigation"> Home | Directory | Archievs | Photo | About me </div> </div>
and CSS file is like below:
#container
{
position: relative;
width: 780px;
border: 1px solid red;
}
#navigation
{
padding: 15px;
width: 100%;
}
You want the “navigation” div lies inside the “container” div and it is fine in IE, but not in Firefox. The inside container div would overflow.Instead, you should modify the width property “width” in “navigation” selector and it should be like this:
#navigation
{
padding: 15px;
width: auto;
}
or
#navigation
{
padding: 15px;
}
Thus, it works fine both in IE and firefox. Therefore, when there some padding and margin in your nested div, be careful with your “width” settings. It should be “auto” to avoid the overflow in Firefox.