Question

Hi I’ve just started writing a page and i’ve hit a snag I’ve never had before and I’m not sure what i’ve done. This fiddle http://jsfiddle.net/4Fbpu/ displays fine in FF, Opera and IE 9 (surprisingly). But in Chrome the content starts midway between the header and wrapper. Does anybody know what’s causing this and how to fix it please?

Answer 1

First of all, try reducing the complexity in your test cases. I made a simpler test here: http://jsfiddle.net/guitarzan/PqvKR/4/

I think this is a rendering bug in Chrome. It is treating the floated ul as position:absolute, but only when its height is less than or equal to the negative (top) margin on its containing parent. Increase its height greater than 50px and it pops back into place. See here: http://jsfiddle.net/guitarzan/PqvKR/6/

So I found two solutions:

1. Add a height to the ul of 51px or greater. This is probably too tall for your design, so you’d have to adjust other things, or…
2. Add another element around the ul and give it a height greater than 0px.

Test solution here: http://jsfiddle.net/guitarzan/4Fbpu/13/