Alexandru Dinulescu's Thoughts

Hello

While i was building a webpage for a client, i came across a very peculiar issue. It seems that webkit (safari/google chrome) have troubles understanding an absolutely positioned floated element

This is the HTML for the file in question.

The CSS looked like this

This happens in Safari/Google Chrome

The image shows HOW Safari/Google Chrome behaves, IE6/IE7/FF3/Opera9.5+ work ok, but everything based on webkit breaks

After fiddling around with the CSS lines i think i found out what happens

Given that the ul element is absolute positioned, it is OUTSIDE the normal pageflow, however it breaks everything after it, because li elements are floated. so an empty clear div should be put there. In normal circumstances like these

everything after the 2 floated elements will resume it’s normal position, however in this case, since the LI elements are somehow outside the page-flow but they are floated, they break the pageflow. Now the surprising thing is that the div.clear is not doing it’s job to put the page in order in webkit. I dont know why since it’s a block type element and in all other cases it works, here however you need to have him not only as a block element but also it needs to have a height of 1px or more.

After putting the height 1px to the clear div, it started to behave properly in Safari / Chrome. Very weird bug, even more weirder than those on IE6/IE7

Questions in comments

Cheers AlexD