Search code examples
cssfirefoxoperaimagemargins

Weird Firefox negative margins

I have discovered a strange bug in Firefox 4.0.1 (It also happend in Opera 11.5) so I've created this example to show the problem:

http://jsfiddle.net/whYC7/

If viewed in safari everything looks fine, but when I open it in Firefox or Opera the image inside the div with a negative margin still takes up space in the div underneath.

Does anyone know of a way to fix this?

Solution

  • This is the correct rendering per the CSS spec. The negative margin means that the top of the red div is higher than it would be otherwise, but once you determine where its top is the position of the text just depends on the intersection of the float and the div. See http://www.w3.org/TR/CSS21/visuren.html#floats the paragraph starting "A line box is next to a float".

    You may want to file a bug on WebKit here.