Fix CSS Div incompatibility in Firefox
Posted: Sun Dec 27, 2009 11:10 am
People often use nested "<div>" tag in their HTML files. 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.
HTML File:
CSS File:
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:
OR
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.
HTML File:
Code: Select all
<div id="container">
<div id="navigation">
Home | Directory | Archievs | Photo | About me
</div>
</div>
Code: Select all
#container
{
position: relative;
width: 780px;
border: 1px solid red;
}
#navigation
{
padding: 15px;
width: 100%;
}
Code: Select all
#navigation
{
padding: 15px;
width: auto;
}
Code: Select all
#navigation
{
padding: 15px;
}