HTML, Standards and me.

A few months ago (or is it years?), I’ve been awakened, so to speak, to the wonders of web design standards that guides (should guide) developpers who use HTML and descendants/friends to build web pages.

I was quite competent before. My stuff worked marvelously on IE browsers and great on Netscape. But I didn’t really follow standards.

A few friends talked to be about the wonders of W3C (which I knew but didn’t care much about). Eventually, the arguments went home and I went standard.

I even switched browsers to Firefox (which is a great browser, by the way – especially if you’re a developper).

However, I still often use IE. Because, I am part of planet earth and most of them do. There sadly is still a lot of web sites that follow the non-standards of Microsoft. Shame, shame, shame.

(Reality, reality, reality).

Working at following the standards, I came to see where Microsoft strayed away. There’s nothing wrong with extending the standard (or proposing extensions to the standard, like the folks at MS like to say). It’s annoying when the standard is just not followed. A thing wich the IE
browser is kinda fond of. Not too often, but often enough to instantaneously cause gray hairs to grow on many a developper’s head.

Firefox, on the other hand, follows the standards rather well. Not always – they’re only human. But they do it better than IE. And I like them for it.

Usually, when Firefox does not follow standards, IE does not either. Such is the case if you ever get to play with negative z-index. On Firefox, negative z-order means : “don’t show the item”. I don’t know, maybe it sends it behind the body? On IE, weird ass unbelieveable shit happens. Things such as hyperlink tags on items with negative z-index don’t receive mouse input anymore. Shit such as negative z-index don’t have an effect on elelments generated via javascript.

Which usually ends up with the devleopper saying : screw the sensible design. I’m breaking this shit into tables.

(Yes, I’m speaking from experience).

But the thing I really wanted to talk about is tables.

See, if you read HTML evangelists, they’ll tell you that tables are evil. I (and many others) disagree.

I’d say tables are somewhat evil.

You can do alot of things in div tags. Tables are not always required.

But there’s a stupid thing in W3C that makes me wonder about that stuff and often sends me to tables.

Worse, it often sends me towards single-cell tables. It’s depressing.

This stuff is called: vertical alignment.

Vertical alignments don’t seem work in most block elements (including div). If they can work, I haven’t figured it out. And it’s driving me mad.

Often, I want to align text on the bottom of a div. I don’t want to ‘pad the text with an amount of pixels that’ll send it to the bottom’. I want to say, using CSS that ‘this piece of text goes on the bottom’.

Works fine in td using vertical-align. That’s all.

Sometimes, I have a piece of text, followed by a logo, followed by a piece of text. I want them all vertically aligned so their centers match.

Only one solution: a table.

I often waste so much time on trying to work around using tables and use a more sensible (and CSS-customisable) HTML design and end up just stuffing things in table that it’s making me wonder why I dropped out of using tables in the first place.

That’s "all". The ‘position: relative’ directive says to the layout engine "For all my children, absolute positioning is relative to me." Then, the ‘p.inner’ is positioned to the bottom.

Lots of caveats. The most important is that absolutely positioned elements _don’t_occupy_space_. That means that the div.outer won’t grow to accept the p.inner; so the trick will work only if there’s a specified height on the div.outer.

For your vertical aligment of consecutive images and text, you are in an inline context. Specify a large ‘line-height’ (high enough for what you need to align) for each of your elements, then use vertical-align.

Nifty trick, the absolute embedded in relative. I wasn’t aware of that one!

It had always annoyed me how position:relative took up its original space and how position:absolute ended up being useless most of the time.

However, I still can’t think of a good reason to not make vertical-align work within blocks. There might be one, but I just can’t figure it out.

While the relative-absolute trick above is quite neat (if not intuitive), it still is very bad if you wish to center vertically – I definately don’t want to talk in terms of “pixels” (position:absolute;top:10px;) when I could be talking in terms of what I’m trying to do (vertical-align:center;) …

Inline elements have an intrinsic height – defined by the font-size, line-height, image height, etc, but block elements don’t: their size is calculated by the size of the inline elements stacked in them. So a block element is only as high as the elements contained in it, making any ‘vertical-align’ useless because there never should be any available space, all the height being filled by inline elements.

If you force an ‘absolute’ height to a block element, then ‘vertical-align’ makes sense, but as ‘vertical-align’ is relative to the ‘line-height’, you’ll have to specify the ‘line-height’ too. But everything will break when you have contents on more than one line…

Yeah, well, I suppose. It wouldn’t be too hard to make it work with blocks too. Even without specifying a “line-height”, it could’ve used the center of the block element as a default.

I still prefer using tables if I’m in need of vertical-centering – even if it forces me to use single-cell tables. Heck, even if I know the height of my components. You never know when the content is going to change (be it text or picture – or both), heights can vary (bilingual designs will do that). Centering using paddings or relative/absolute positionning is a headache to maintain if you vertical-align.

The absolute/relative trick you’ve shown me, though, is awsome for aligning on bottom. I love it. Sometimes I’ll still prefer tables (which will allow me to change from bottom to middle or top at the whim of client’s wishes).

Of course this point’d probably be moot if IE had bothered implementing display:table-cell …