Firefox CSS float bug?

UPDATE It seems to have magically corrected itself because now it works, but I emphasize that it wasn't a cache issue because even I was able to update with new images but they always appeared "below" rather than "next to"... I don't understand...but suddenly it worked now.

if you check www.dodomainer.com in Safari and Chrome, the two images in the header float, but not in Firefox. Any idea how to fix this? Note, it's definitely not t开发者_运维问答his way in Firefox as a result of a cache

this is the code that I use. Any idea how to fix the problem?

<div class="header a"><a href="http://dodomainer.com/">
<img src="http://dodomainer.com/images/dodo4.jpg" width="400" height="50" padding-left="10px"  alt="dodobird" />
</a></div>

<div class="header b">
<a href="http://dodomainer.com/">
<img src="http://dodomainer.com/images/dodotest.jpg" width="380" height="70" padding-left="10px"  alt="dodobird" />
</a>
</div>

CSS

.header {  
    float: left;
    width: 400px;
}

 .a {
    height: 50px;   
}

 .b  {
    height: 70px;
    padding-left: 100px;
}

---

There is no problem to be fixed here.

Your code should work in all browsers. I checked in IE, FF, Opera (all latest though). All good.

There are just 2 child divs with float:left.

---

Michael, i feel like you may have an overflow issue here regarding your padding and the various methods browsers compute the box model. Header A has a width of 400 but an image within of 400+the padding. Remove the padding or resize it's container to actually contain it. Other option is to set overflow to hidden

---

This looks fine in my FF and other browsers.

However, you may want to reduce the padding in

.b  {
    height: 70px;
    padding-left: 100px;
}

That could be causing you problems.

EDIT:

The original problem may have disappeared because of padding-left:10px; that was added inline to the img. If that is removed, you may experience the problem again.