Still As Life

I am looking forward to release of Internet Explorer 8, and what will hopefully be a reasonably quick take up of it.

In the myriad of new standards compliant features is CSS table support. I’ve used these countless times in Firefox, Safari and Opera, only to find that I have to completely rewrite the CSS, far more complexly, in order for it to work in Internet Explorer and look fairly similar.

Sure, I could just use HTML tables, but they feel clunky, restrictive and outdated to me. They have their uses, and layout design is not one of them.

Float tags do their job, that’s for sure, but they require far more code and are in general far more complex to get the same effect as the simple CSS tables which are far easier to use than HTML tables as well.

The new TerraMedia website that is currently under development was written using CSS tables initially. To get the same effect in IE6 and IE7 without using HTML tables, I’ve had to add a additional background image that would not have otherwise been needed, as well as use completely different CSS for the design that took twice as long to write.

If you haven’t used, or even heard of CSS tables before, they are really quite simple.

Say you had the following HTML:

<div id="container">
<div id="left"></div>
<div id="centre"></div>
<div id="right"></div>
</div>

If you used CSS tables, all you would have to write in the stylesheet is this:

#container {
disply: table;
}
#left, #centre, #right {
display: table-cell;
}

Then you can go and specify any further styles however you want them. That’s all there is to it. That will give the exact same appearance as a three-column HTML table. The difference being that it is far easier to change the appearance of if you need to, as well as the positioning and so on.

For more information on CSS tables, there is a blog about it by Kevin Yank over at Sitepoint.

Of course, without complete browser compatibility, using these does pose a problem. With IE8 coming up though, hopefully it will become easier to utilize this excellent tool.

I noticed some of the commenters over at the Sitepoint blog found that the sample tabular website there didn’t always render correctly in Firefox, sometimes pushing the third column below the other two.

I haven’t had this experience myself, but Kevin posted a fix, saying that Firefox has a long-standing render problem that requires the

display: table-row

tag to be added to an additional containing div, within the original one. The additional tag should do the same as the HTML <tr> tag. I however think that the problem with his example could be fixed if he used either all fixed widths or all percentages. As he uses a combination of both, where the percentages add up to 99%, I think this would be the cause of the problem. I have found in my own usage of CSS tables that the use of widths is no different to the use of widths in floats and divs in general, if the widths add up to more than the width of the screen, it’s going to either go off of the screen, or it’s going to get pushed below everything else if it exceeds the width of it’s containing element.

It will be a while before they will be widely usable, considering how widely IE6 is still used, even after how long IE7 has been out. However, it is a step in the right direction and will hopefully result in some nice new standards compliant designs.

Popularity: 20% [?]