CODEWITHSUNDEEP
cssfirefoxcss-float
Leahcim
Leahcim

Reputation: 41929

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 this 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;
}

firefox

Upvotes: 0

Views: 5783

Answers (3)

Jason Gennaro
Jason Gennaro

Reputation: 34855

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.

Upvotes: 0

Marlin
Marlin

Reputation: 749

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

Upvotes: 1

kheya
kheya

Reputation: 7622

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.

Upvotes: 1

Related Questions