Margin overflow problem

I have a problem with some CSS. This is my html

<body>
<div id="cn">
 <div id="hd">
  <ul>
   <some li's>
  </ul>
 </div><!-- /#hd -->
 <div id="bd">
 </div><!-- /#bd -->
 <div id="ft">
 </div><!-- /#ft -->
</div><!-- /#cn -->

and there is my CSS:

div#cn {
    position: relative;
    width: 960px;
    margin: 0 auto;
    background: #f7f7f7;
}

div#cn > * {
    position: relative;
}

div#cn div#hd {
    height: 258px;
    background: #f7f7f7 url(../img/hd.jpg);
}

div#cn div#hd ul {
    margin: 50px 0 0 0;
    padding: 0;
    list-style-type: none;
}

div#cn div#hd ul li {
    float: left;
}

div#cn div#hd ul li a {
    display: block;
    height: 35px;
    padding: 20px 25px 0 25px;
    font-weight: bold;
    background: pink url(../img/nava.jpg) right 0 no-repeat;
}

Now the margin is not affecting the UL but the Div around it (#hd) in firefox. Its like i had the margin on #hd and not on the ul... Now it gets strange, if i set a border to #hd it works! (or if I palce a nbsp before the UL it works to)

How strange is that? And can someone tell me why this is happening and how i can fix that properly. (it don't wanna set a border to make it work :P )

ansaurus

tags:

views:

answers:

Margin overflow problem

related questions