badg0003
04-07-2006, 10:35 AM
I'm not sure if this is a bug - I somehow think it is not since this problem does not occur in IE! :)
Regardless, my problem is this (please see my code listing below). I have an element (UL) inside of a DIV that has a set height assigned to ie (104px). When I attempt to put a top margin of 40px (or any size for that matter), instead of shifting the UL element down the assigned amount, it instead shifts the entire parent/container element (DIV) down. This only occurs in Mozilla-based browsers and does not seem to affect IE.
Has anyone else found this problem? I found one way to "fix" it - if you assign a border to the DIV or give it a padding value it works the way it should, but there has to be a reason why this problem is happening in the first place.
HTML
<div id="header">
<p id="toolbar">
<li><a href="#" id="tool-en-home" title="Home">Home</a></li>
<li><a href="#" id="tool-en-contact" title="Contact Us">Contact Us</a></li>
<li><a href="#" id="tool-en-sitemap" title="Site Map">Site Map</a></li>
<li><a href="#" id="tool-en-links" title="Links">Links</a></li>
<li><a href="#" id="tool-en-order" title="Order">Order</a></li>
<li><a href="#" id="tool-en-language" title="Français">Français</a></li>
<li><a href="#" id="tool-en-search" title="Search">Search</a></li>
</ul>
</div>
CSS:
#header { /* DIV element */
background-color: Darkorange;
height: 102px;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
#header #toolbar { /* UL element */
height: 23px;
list-style-type: none;
margin: 44px 0 0 408px;
overflow: hidden;
position: relative;
width: 100%:
}
Regardless, my problem is this (please see my code listing below). I have an element (UL) inside of a DIV that has a set height assigned to ie (104px). When I attempt to put a top margin of 40px (or any size for that matter), instead of shifting the UL element down the assigned amount, it instead shifts the entire parent/container element (DIV) down. This only occurs in Mozilla-based browsers and does not seem to affect IE.
Has anyone else found this problem? I found one way to "fix" it - if you assign a border to the DIV or give it a padding value it works the way it should, but there has to be a reason why this problem is happening in the first place.
HTML
<div id="header">
<p id="toolbar">
<li><a href="#" id="tool-en-home" title="Home">Home</a></li>
<li><a href="#" id="tool-en-contact" title="Contact Us">Contact Us</a></li>
<li><a href="#" id="tool-en-sitemap" title="Site Map">Site Map</a></li>
<li><a href="#" id="tool-en-links" title="Links">Links</a></li>
<li><a href="#" id="tool-en-order" title="Order">Order</a></li>
<li><a href="#" id="tool-en-language" title="Français">Français</a></li>
<li><a href="#" id="tool-en-search" title="Search">Search</a></li>
</ul>
</div>
CSS:
#header { /* DIV element */
background-color: Darkorange;
height: 102px;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
#header #toolbar { /* UL element */
height: 23px;
list-style-type: none;
margin: 44px 0 0 408px;
overflow: hidden;
position: relative;
width: 100%:
}