A footer not showing right in IE7/6

HTML & CSS
1

Hello,
The footer of the following page looks nice in all browser except IE7 and IE6:

http://ivanhalen.com/css/c2.html

The problem is the floated p in the footer: if I remove the float, all is fine again
Putting a clearing <div> solves the problem too, so I think it’s a clearing float problem… But I get crazy because the floated p is inside a floated div (the footer) so it should clear… More, I used the overflow:hidden technique and its counterpart for lt IE7, but bothing happens…

Please, can you help?
Thanks…

2

(can’t wait the day when there will be no more non-standard browsers around…)

Don’t hold your breath. : )

3

Hi Rayzur!
Ehr… yes, I’m “refactoring” the grid to be “almost-standard-these-days” 950px wide and 12 columns (the grid I’ve worked on before was for 800x600 screen resolutions and it lacked some… “air”): it’s a sort of my “personal laboratory” where I experiment different solutions to see what’s the most reliable and with less code :slight_smile:

Thanks, I was missing the ignored last floated bottom margin on IE6/7 (can’t wait the day when there will be no more non-standard browsers around…): I took inspiration from your example and I simply added a conditional rule for IE6/7


-ie.css-
#footer { *padding-bottom:10px; ... }

At the moment, all is clear in this grid except one thing, hope you can help for this too…

In the ie.css file I had to put the line:

#content { _float:left; }

Without this snippet, on IE6 the Content div has a tedious one-or-two pixels left margin: please, can you tell me why?

Thanks!

4

Hi,
IE6/7 will ignore the bottom margin of the last float.

You floated that “p” with an inline style but there is a bottom margin set on it in your typoog.css

p { margin:0 0 10px; }

There is nothing wrong with setting a bottom margin on a p tag but as you see it causes problems in IE when it is on the last float.

You’ve been working on this grid css for over a year now haven’t you. I remember helping you with it a couple of times before.

Add these rules to the end of your grid.css to override previous rules and you will see it work the same in all browsers. :wink:

[B]#footer p[/B] {margin:10px 10px 0;}
[B]#footer[/B] {padding:0 10px 10px;}
5

At the moment, all is clear in this grid except one thing, hope you can help for this too…

Without this (TWO FLOATS), on IE6 the Content div has a tedious one-or-two pixels left margin: please, can you tell me why?

Hi,
That sounds like the 3px Jog in IE6.
It happens when a static block sits beside a float, as you discovered the cure is to float both elements.