(EDIT)Guys this solution for unknown height! It is not the one with height specified that is known for very long time! This is brand new solution! I noticed people think its the old one. (/EDIT)
Yep, you got that right. There is a solution and I am presenting it to you. Actually it was blogged in Czech Republic allready, but I wont go into much details here (no explaining here, sorry). Here is the link http://portfolio.canlog.cz/works/valign/
If you have any questions, feel free to ask. Cause I invented it, it will be easy for me to answer the questions. There are few bugs which I will list here later on.
So, how do you like it?
By the way it is tested in Safari, IE5+, Firefox 1.0PR (probably works in all versions), Opera 7.5 (well it should work in 7.23, maybe even in lower versions), Konqueror, Netscape 6.2+ ... i guess thats all, if you have any other browser available, go ahead and test it, then write the results...
btw sorry for my english i am from czech republic (though i moved to canada recently)
http://www.jakpsatweb.cz/css/css-ver...-solution.html this is the article by Yuhů about this vertical centering, it lacks explanation of some bugs, so I will post them here.. AND his version uses _ so not valid, better use the one I use. or the conditional comments
Thats quite a useful trick that takes into account ie's incorrect rendering of 50% in this situation to move the element back to the centre and not ot the top as it should do.( I don't see that left:50% and left:-50% are needed in this situation though.)
The display: table and table cell are known solutions for compliant browers but you have merged them together quite nicely.
I'm sure a lot of people will find this useful for vertically centering elements of unknown height.
Buddy Bradley: what the hell are you talking about? have a look at the solution... for his you have to know the height, here you dont have to this is really the first solution for the problem, if you dont see that it is different, then you must be blind...
well 5.1 is dead i guess... you wont see many things working in that browser there is 5.2 i guess or am i wrong?
IE/Mac 5.1 and 5.2 have very little difference. The main difference is that 5.2 will only run on OSX, and 5.1 or older will only run on OS8 or 9. Don't think you're getting off scott-free by ignoring 5.1 .
vgarcia: well many solutions dont support IE/Mac 5.1 or 5.2... except for this browser it works everywhere... maybe someone will find a way to get it working in IE/Mac 5.1 (sadly i dont have it so i cant do it)
I think this is very good solution for the problem that was unsolved for sooo long. At least that is what I think.
I already tried hiding the child selector as I know mac parses it ok.
I tried your code again anyway but its the same result. Mac ie5.1 won't recognise any percentage value on your #cont element because it is a pecentage based height itself.
I forced quirks mode in mac and then it recognises the percentage but it puts the div right back at the top of the page where it started and where iepc should really put it. It seems that ie mac doesn't have the same rendering problems that iepc has and is actually better programmed in this area.
I tried all the things I can think of but no joy It only does what its supposed to. Unfortunately it doesn't understand display:table so it cant have the same solution as mozilla etc.
What happens in your example is that the elements top is pust at 50% of the outer div and it just stays there.
I think your solution is good enough not to worry too much about ie5 mac as they will still get something usable but not quite right. Unless of course there is some way around it and something that you can use just on iemac but I can't think of it at the moment