[UPHPU] More CSS frustration

[Mac Newbold]

Yesterday at 4:33pm, cole at colejoplin.com said:

>> Second, vertical-align _does_ work in all major browsers, but AFAIK only
>> when applied to a table cell. So if you have a table cell and tell it
>> to be vertical-align: middle; it will do what you intended. The
>> simplest way in this case, even though it seems a bit of a waste, would
>> be to make a single-celled table (one row, one column) that is the size
>> of the area in which you want the title centered.
>
> The above is true, but the table is now hanging out there in the markup 
> (sigh).

"Hanging out there in the markup"? Yes, there's a table there. I agree 
it's lame to have to add an unnecessary table just to get vertical align 
middle to work, but it's a lameness in the browsers that we can't change 
at the moment.

> There is another alternative to consider. It's not as *pure* as I 
> would like, but it works in FF/IE6/IE7, and isn't a complete mess. So if 
> forced, I'd probably consider the following example:
>
> <div style="border: 1px solid black; display: table; height: 400px; 
> #position: relative; overflow: hidden;"><div style="#position: absolute; 
> #top: 50%;display: table-cell; vertical-align: middle;"><div style="border: 
> 1px solid blue; #position: relative; #top: -50%; "><h1>Big 
> text</h1><h2>Adjustable height</h2>	</div></div></div>

This is my personal opinion, and other may or may not share it, but I 
think that is much more of a mess than this:

<table><tr><td style='vertical-align: middle;'>
<h2>Title</h2>
</td></tr></table>

I don't feel like the browsers are up to par yet to allow for so-called 
"pure css" implementations on web pages in a robust cross-platform way. In 
fact, if people are going to keep advocating table-less design, then 
there'd need to be an acceptable replacement. In other words, something 
that can properly do auto-sizing rows and columns. (No, floating divs 
can't do that.) The way people try to float divs, abosolute position 
things, and fix absolute dimensions (height and/or width) on things to 
make them work is a much less robust and flexible solution (even though it 
might be "pure css") than the corresponding implementation that may 
include actual tables. CSS is supposed to make it easier to change and 
override things, but the absolutely-sized-and-positioned floating div 
thing that is so popular now is so incredibly fragile that I've seen it 
stop working properly with changes as simple as adding or removing content 
or doing a text-size increase or decrease in the browser, or a font 
replacement.

Everyone wants to downplay tables, even to the point of starting rumors 
that they're going to be deprecated at some time, but the fact of the 
matter is that browser have really good and much more consistent support 
for tables than for floating and CSS1 and CSS2, and have had it for a very 
long time. It is really easy to write clean html with a bit of CSS and 
have it work without any hacks or contortions across all major browsers. 
Where I have to make good maintainable code as quickly and efficiently as 
possible every day, I haven't found a good way to make a living trying to 
make them all "pure css". But everyone is in different situations, and the 
same answer isn't always right given that we all have different factors 
and priorities involved in our decisions.

Mac

--
Mac Newbold		MNE - Mac Newbold Enterprises, LLC
mac at macnewbold.com	http://www.macnewbold.com/