1

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!

Dan
  • 5,836
  • 22
  • 86
  • 140

2 Answers2

0

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/.

Dan
  • 5,836
  • 22
  • 86
  • 140
-4

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

souichiro
  • 181
  • 1
  • 1
  • 8
  • Thanks, but I think you misunderstand. I'm not looking to do anything with CSS3 transitions. Merely trying to achieve the same layout in Firefox and Chrome etc. If you check the fiddle in those browsers you'll see the difference. I just need them to render the same. – Dan Jan 24 '13 at 13:30
  • The Link was just good for an example. You should just add the [ webkit moz o ... ] options to your css, as I said, every Browser is using it differently, so with this you can archieve your goal (that one things looks the same in every browser) – souichiro Jan 24 '13 at 13:51
  • http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm is the right Place, edited it in my Post too. – souichiro Jan 24 '13 at 13:57
  • Thanks, but I'd rather identify the issue and fix it rather than just adding vendor prefixes all over the place. – Dan Jan 24 '13 at 14:16
  • As i know, this IS the issue. Because W3C is not giving proper standards, every browser uses another method intern. With this clean styling, everything will be fine and you can be sure about it. – souichiro Jan 24 '13 at 14:23
  • How would you propose a vendor prefix would solve this - perhaps update the fiddle? I'm not going to go down that route but I wouldn't have even thought it possible anyway without some user agent sniffing so I might just learn something. – Dan Jan 24 '13 at 14:55
  • You said it yourself, your problem is, that the code is NOT the same in all browsers. To make them look all alike you have to use the prefixes to guarantee that all browsers that are common to customers are doing the same. And why is it sniffing? The used Browser just get what it needs without problems. It isn't sending or logging anything, it is JUST there to handle everything properly. – souichiro Jan 24 '13 at 15:02