Posterous theme by Cory Watilo

CSS and Vertical Alignment - getting worse not better

I have to preface this by saying that it's been years since I took a stab at HTML/CSS coding, and I was never really a wizard at it - I know there are people out there that know all of the CSS properties, what they do and how they work, and more importantly - how they work in different browsers.  I'm not one of those people, but I can figure things out.

Used to be, you could lay out a web page pretty much entirely using tables.  But the W3C has taken us from CSS1 to CSS2, and HTML 4.1 is now "the standard" - and tables are no longer the way to go.  Many of the styling properties for table elements have been deprecated, and you're supposed to use CSS2 styles to render the content the way you like.  This subtle shift has really placed an emphasis on not using tables for layout, as most of the styling properties can be applied to block and inline containers such as DIV and SPAN, which in turn and in theory actually provide you with more formatting options such as absolute x,y positioning on a page, overlapping, etc.

So I'm trying to vertically-align something using DIV's and CSS2, and there just isn't any real way to do it.  Creative people have constructed ways to solve the problem, but they all come with some downside: either the fix doesn't work across all browsers, OR it requires that you know the height of the element you want to center.  I've only found ONE solution that allows you to center an object of unknown size (such as, say, text that a user submitted that might be many lines long), AND works on any browser (even with hacks that force the solution to work on any browser).

If anyone has additional, perhaps even more elegant solutions to this, I'm all ears.

For the record, I've tried the solutions at the following links.  Take a read through, and you'll see that all the cross-platform ones require that you know and specify the height of the content you're trying to center.

http://hicksdesign.co.uk/journal/how-to-vertical-centering-with-css
http://www.student.oulu.fi/~laurirai/www/css/middle/
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

The last one is probably the closest to a cross-platform solution that you're going to get, but relies on some interesting hacks to get it to work.  I think it's probably the most flexible and simple solution I've found at the moment.

Isn't it interesting that we seem to have gone backwards instead of forwards?  And isn't it also interesting that despite being the most used browser on the planet, IE is still the one that causes the most grief?  Don't you think it's time that the W3C implemented a compliance system that browser vendors had to submit to in order for their product to be "trusted"?  Only problem is, I don't know how you would make it so end users gave a damn.