Chrome and Firefox render positioned layout with negative margin differently - how to prevent?

Question

I have a very specific layout to achieve with HTML/CSS. Basically I have a text container with a couple of left-floated boxes within. I then have a footer which needs to overlap this text container by a few pixels at the bottom. I'm achieving this by using a negative top margin on the footer, and setting position:relative and z-index on the text container and footer to make the footer layer stack above the text container.

It can be best demonstrated in a fiddle: http://jsfiddle.net/sW9cu/2/.

The issue is that in IE9 and Firefox 18 the content of the footer clears the content of the text boxes, whereas in Chrome the content of the footer overlays the content of the text boxes without any clearing.

I basically need this to be consistent in IE7+, Firefox and Chrome, one way or the other. Not bothered which way - it can either clear or overlap, but it needs to behave the same regardless of browser.

Can anyone see why it's doing this and how to rectify it? It may be to do with the micro clear fix I'm using on the text container, but I'm really not sure.

Thanks for any pointers folks - this one has me stumped!

Answer 1

Sorted. I couldn't overcome the issue with the current mark-up but by removing the negative top position and adding an absolutely positioned div inside the footer with a negative top value (top: -20px;) that has achieved what I'm looking for. See: http://jsfiddle.net/sW9cu/4/.

Answer 2

As I know, the answer would be WebKit in CSS

Internet Explorer, Firefox and WebKit are three different things. Webkit is used by Safari and Chrome. moz is for Mozilla o is for Opera "normal" is for Internet Explorer.

You can read more about here