Sometimes I wonder why browser developers are still alive just by estimating the number of web developers fighting with their software. Regarding me, I am eating tons of sweets here to calm down, preventing to beat up the next browser developer crossing my way.
My last nervous breakdown was fiddling with an element to fill the screen by having height set to 100%. The simple idea crossing my mind was just adjusting the CSS Class to do it:
#container {
margin:0 auto;
background:#ffffff;
border:solid 1px #FFF;
width:830px;
height: 100%;
}
But that damn object wasn’t impressed by that statement at all. So I checked out the whole thing and found the error as I suspected my #container to be the parent element even if it’s the first one after the opening body tag..
You might shake your head now, but if you’re writing valid (x)html, your site usually starts with the html-tag followed by the body which are just stretched ‘as needed’
If we keep that logic in mind, we can modify our stylesheet:
html,body {
background-color:#bacaff;
margin: 0;
height:100%; /* That's the key! */
}
#container {
margin:0 auto;
background:#ffffff;
border:solid 1px #FFF;
width:830px;
min-height: 100%; /* Min height for modern Browser */
height: auto !important; /* !important-Rule for modern Browser */
height: 100%; /* Min heigh for IE (<7) */
}
And then things work.
numerodix says:
I can’t believe you cracked it! I didn’t think it was possible to actually do this, I’ve tried so many times.
Stargazer says:
I was tearing out my hair on cracking that one. The common mistake is just expanding the body and leaving out the html main tag – which is close but no cigar. For remembering it now, I just took some notes here for making google pointing me at my own notes when searching for it again :)
Toei Rei says:
Buddy, could you please post such topics a little earlier? I would have needed that hint a couple of days ago…
But in general – great work, great explanation!
Stargazer says:
It’s simple to overlook things on the web, as some structures are unexpected like this one.
Shellie Z Design says:
YOU ROCK! Thank you for saving research time!
Stargazer says:
I always wonder how you designers are able to stand those browser devs…
Alex says:
it works for me IE6, IE8, but not IE7. i hate microsoft
Stargazer says:
I have tried to reproduce your problem, Alex – without success…
(in other words – it works in IE7 here too)