Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
{overflow: hidden; height: 100%;} is the panacea!
Sometime ago, I used to say and think that height:100%; was some magical panacea for fixing a few CSS inconsistencies in IE6.
I used to put it in some places of the stylesheet and voilà: common problems like thinks moving few pixels when hovering links in IE6 were fixed like a charm!
And because adding height: 100% didn’t used to break anything in Firefox/Opera/modern-browser, I always went to sleep very calm, saying myself: “Be calm, Maniquí, you didn’t use any hack. You use a simple CSS declaration and because Firefox has rendered it fine, there is nothing to be afraid”.
(I try to avoid hacks at all)
Now, I started to work for an small bussines. My job is to convert graphic mockups in pure xHTML/CSS.
Things have become more difficult! I have to fight again complex layouts with exotic colors/background-images/fonts.
Cool! Too much to learn!
Of course, I did know many image replacement techniques and other cool tricks that come to hand when things get difficult.
But I didn’t usually applied them, because I don’t feel comfortable with graphics designs and using images, and I love to play with the CSS posibilites: borders, background-colors, text-transformations!
Have you read the above and get to this line? I’m not so boring as I think I am!
Well, in this new job I need to do a lot of image replacement so I needed to review my CSS skills and start to negotiate with hacks and workarounds. I’m learning again and making my knowledge more solid.
One technique I started to use more often is the one that need just three images:- one for the top (with both rounded corners, usually applied to a heading element or to an inner div),
- one for the body (1px-height and it includes the borders, usually applied to the outer/wrapper div)
- one for the footer (with both rounded corners, usually applied to the last element or to an inner div)
It usually doesn’t need too much (nor invalid) extra mark-up and you get consistent results across browsers.
Of course, you are usually limited to a fixed width of the wrapper div.
Well, the problem was that sometimes I was getting inconsistencies in IE6, and even IE7 and even Firefox: the 1px-height image showed outside the rounded corners. ¡Awful!
In the other side, I was amazed about this technique (that is also explained here).
That clearing technique isn’t related at all with my other problem, but it was a nice discovering.
About the panacea:
To solve the problem above, I’m using a CSS rule like this
div#wrapper {
overflow: hidden; /* I think it can be auto too */
height: 100%;
...
}It makes everything to display correctly across FF, Opera and IE6/7.
I still can go to sleep calm, without having nightmares.
Of course, I doubt I have discovered anything new in the CSS world, but I will baptize this as the panacea technique for the sake of feel cool.
Will you consider this a hack? Why?
Could you share any resource that could add more information about this?
Are you bored?
Last edited by maniqui (2006-12-06 20:06:07)
Offline
Re: {overflow: hidden; height: 100%;} is the panacea!
What you have declared there is all valid CSS rules so NO, I would not consider that a hack. I would consider that a “workaround”, but not a hack. To me, a workaround is when you bend CSS to work a certain way using certain combinations of rules while still all being valid, standard rules in the CSS library.
A hack on the other hand is something put in place that is more browser specific rather than CSS specific and works regardless of what CSS rules you put in with it.
Does that make sense? I’m bored…..
Offline