IE7 CSS overflow:hidden??

[chandrika]

I have just redone the css for the price comparison site in my sig at bottom of this post. I have run into one problem in IE7 which I am not sure what is causing it or if there is a way to fix it.

To make the columns equal height I have used
/*** Equal-height Columns ***/

#container {
overflow: hidden;
}
#container .column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
#footer {
position: relative;
}

And put the footer in a wrapper
/*** Footer Fix ***/

* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #ffffff;
}


Everyhing works fine except in IE7 I am getting this problem where the overflow is visible below the footer making the page really long and wondered if there is any fix for this that anyone knows of?

[chandrika]

Was fixed it with following css
#container {
overflow: hidden;
position: relative; /* fix to 'IE7 10000px padding-bottom spill over footer' problem */
padding-left: 180px; /* LC fullwidth */
padding-right: 180px; /* RC fullwidth + CC padding */
}

And am really happy, as it has taken me ages to find a layout working across all browsers, with center column liquid, sides fixed, all columns equal length, center column coming first in code, also with a header & footer.

For anyone interested in a similar layout, which is really handy for SEO it is at
A List Apart: Articles: In Search of the Holy Grail

That doesnt quite work in IE7, but there are more fixes at
The Holy Grail CSS Layout Fix for IE7

Which appears to cover pretty much everything and get this layout working everywhere.

Its such a neat layout, until I found this, I could only find equal column heights that had percentage widths or all fixed widths, and I wanted my side columns fixed width and only center column liquid and coming first in code. So this has solved that and i am happy

[WDC]

Thanks for the link.

THere is always some probelm with IE nad FF. Sites are displayed well in one and have some layotu problem in other.

e.g take tables : if oyur are usign tabel inside tavle it will be displayed fine in IE but have som display prb wih FF with tables overlapiinf ach oither ...

You have to recheck and fix it

[chandrika]

Timely advice, I just checked what I am currently working on in IE and it was all mashed up due to having put a table in a table, so thanks for your post as it prompted me to do a quick browser check of what I was doing and fix what was an unspotted bodge.

[weegillis]

The reason your original approach didn't work might boil down to the attempt to isolate IE with the * html hack, since the more compliant IE7 now correctly sees HTML as the root element.

Position Is Everything article from 2005:
CSS Hacks and IE7