the first time I ask my question here :)
I am working on a website and I tried to stretch it vertically at the bottom of the client window using a regular trick:
html, body { height: 100%; } .container { min-height: 100%; }
Then I wanted to add some headers above the main content and a sticky footer below. I wrapped both of them in my containers and pulled the header to the top, like this:
.top { position: relative; z-index: 1; height: 168px; } .end { height: 58px; }
Knowing the height of the header and the sticky footer, I then decided to adjust the overall height of the page so that it accurately filled the client window (without scrollbars) if the content was not too long. I did this with negative fields:
.container { overflow: hidden; min-height: 100%; margin-top: -164px; margin-bottom: -58px; } .container-in { margin-top: 164px; margin-bottom: 58px; }
The second container is inside the first, and I put the actual contents of each page.
So, this works great on Firefox 4/5. Absolutely nothing is turned off, it is exactly the same as expected. Chrome also looks fine. However, on IE8, it ignores the negative margin on .container (I checked using the developer tools). The container starts after .top, and as a result there is a 164px gap between .top and .container-in due to the .container-in field.
And the funny thing is, if I switch IE8 compatibility mode to IE7, this problem no longer occurs! Negative fields behave very well in IE7 mode, but, of course, a bunch of other things break, so saying that IE using compatibility mode is not an option.
Any ideas on how to get around this problem / use a different solution to get the same effect in all browsers (IE7 not required)? Am I doing something wrong?
EDIT: After some more fun and games, I found that by replacing the negative fields with a negative vertex: the coordinates (and setting all the containers to be relative), it works fine on IE8, but now it leaves 222px space below the html container in firefox (according to firebug) . Confused!
EDIT2: I think I know what's wrong here, technically. Internet Explorer 8 considers the negative margin to be “full”, and since overflow is hidden, it kills the margin. If I remove the overflow: hidden, it no longer has this behavior, but it violates the rest of the design. Anyone else have any ideas?