Firefox/Mozilla Margin Bug(?)

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 [B]top margin[/B] 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.

[B]HTML[/B]

[CODE]
<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>
[/CODE]

[B]CSS:[/B]

[CODE]
#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%:
}

[/CODE]

Also in #CSS _↴