Webkit phantom float bug

I recently found a strange webkit bug when I used a negative top margin to position a floated element.

I float an element to the left and gives the outer wrapper element a top margin of ex. 100px. Then I give the inner child wrapper a negative margin-top of 100px to push the floated element down. In most modern browsers this works, but in Chrome and Safari we can see a hole where the floated element would have been without the negative margins. The floated element further down looks fine.

[example] (test with a webkit browser)

The “fix” is a strange one. I insert an empty floated div before the inner child wrapper and the phantom float disappears.

[example]

About Tor Brekke Skjøtskift

Senior Webdesigner Media Norge Digital
This entry was posted in CSS. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>