[UPHPU] More CSS frustration

[John David Anderson]

On Jan 17, 2007, at 11:32 AM, Mac Newbold wrote:

> 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.

Here's a single example:
http://developer.yahoo.com/yui/examples/grids/index.html

Your "incredibly fragile" experiences with CSS are most likely a  
minority experience, and in now way compare to the flexibility in  
design and the firm control I can have over complex layouts. CSS is  
now integrating with JavaScript effects, allowing you to define the  
looks of effects and behaviors in your app. Its the direction the web  
is moving, and I'm convinced of that.

> 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.

I doubt we're going to see tables go away any time soon. We need to  
markup.... tables of stuff.

> 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.

This might be due, in some degree, to inexperience in working with  
the technology. A similar argument might be made for me not using  
object oriented design principles, or programming patterns.

The idea with CSS is to keep your markup semantic, and move the  
presentation layer off the the HTML. If you're using tables to make  
things pretty, you might as well <em> to make things italic, and  
<strong> to bold things. Part of the reason CSS is taking hold is  
because it represents a philosophy of separating content, markup, and  
presentation.

Sure, you can use tables and other tags to pragmatically get the job  
done, but in my view, maintainable, semantic, presentation free  
markup will play dividends in the future. There is more to code than  
getting something done: the object with CSS is to increase  
separation, and make things more organized and meaningful.

-- John