There are many differences between firefox and IE when they parsing CSS file.
When I built this site, I often 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 want to do such things and hope people have a nice experience in 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 your "width" settings. It should be "auto" to avoid the overflow in Firefox.