Centered Box o’ Links

I’ve published a short article over at Real World Style on centering a box of links. The interesting part is not in the centering, but the way I’ve adapted the technique in my 7-10 Split article and applied it to a Definition List, getting rid of the table layout in the original example.


While this is a really great tutorial, I would argue that the information was in fact, tabular data, and that a table wouldn’t be out of sorts.

I am fascinated by the seemingly newfound interest of the Definition List, as it is something I don’t quite understand outside the traditional/obvious “dictionary entry” model. Is the definition of “Guinness” really “121 Hits”? I would consider the definition of “Guinness” to be something involving beer.

I am not saying that you and the majority of other people using DLs are wrong, but it seems to me that the Term/Definition model is a bit fuzzy in this case (and in many others). I suppose this also comes from the fairly vague example at the W3C.

Admittedly, the DL as such allows for more interesting “hooks” for CSS purposes. I guess my argument is with semantic accuracy.

Posted by: CM Harrington on August 4, 2004 11:54 AM

Oh, I also wanted to wish you a congratulations on posting to RWS again. I was going to write you (again) to see what you were up to.


Posted by: CM Harrington on August 4, 2004 11:55 AM

DLs are a rather flexible element. Even the W3C gives an alternate example of their use, suggesting that you might use them to mark up dialog:

As for the list in question being tabular data, that could certainly be argued. I would also argue that as a word can have more than one definition description, since the word “Guinness” is also a link, the description of the link could include the number of hits that link has.

But I would agree that, as you pointed out, the extra “hooks” are what makes DL attractive for CSS purposes.

Posted by: Mark Newhouse on August 4, 2004 12:09 PM

Thanks for the link. My W3C reference ( didn’t have the alternate example mentioned in your link. With this information, I agree, DLs can be a very powerful and “style-friendly” element.

Rock On!

Posted by: CM Harrington on August 4, 2004 12:47 PM

Over the years I have mucked about with CSS DL layout a fair bit, but for some reason it has never tweaked to do it like this. A nice addition to the “box of tricks”. Thanks Mark!

Yes, the content could be seen as tabular data but that doesn’t detract from the article — the method is the important thing in this case.

I have found that the improper use of definition lists is less a problem than the use of improper alternate markup (heading, paragraph, heading, paragraph, etc) Why don’t more people know about them or use them? The CMS used at my work doesn’t even have an option for using DLs in it’s visual editor! Extremely frustrating when the best way to present a contributer’s content is a DL.

Posted by: gavin on August 4, 2004 08:00 PM

Well, technically, W3C “HTML/XHTML” is “Standard” HTML. The W3C is the standards body that tells programmers and authors what’s “legal” as far as mark-up is concerned.

In the other camp, you have “proprietary” HTML, that only specific browsers will ever implement. The problem with proprietary HTML is that no other browser will support those proprietary tags, and you’ll effectively lock out a very large portion of your audience.

To give a bad car analogy, it’s as if you built a 400 mile expressway, and along that road, instead of normal petrol filling stations, you only allowed the filling stations to sell your special fuel that couldn’t be used in normal cars (only your brand of car). People driving on that road with normal petrol cars would be screwed if they ran out of fuel, as they couldn’t fill up at any of the filling stations.

This is what the land of proprietary HTML gets you… stranded on the side of the expressway, while everyone else gets to their destination on normal “standard” roads.

You could argue that you have a special internal application and it only needs to work with a specific client, and so you are justified in using a proprietary mark-up. This will work, however, when you decide to ditch the 6 year old client browser for something more modern and less prone to attack, you’ll have to re-code your application. You wouldn’t have to do this if you used standard code.

This isn’t to say standard HTML/XHTML is the same across all client browsers. It isn’t, as many browsers fail to properly implement CSS, and perhaps some of the more modern elements associated with the latest XHTML standard. It does, however, allow most things to work in most cases, while gracefully failing in cases where an element is not understood. Going the proprietary route tends to break in a much more non-trivial way.

Posted by: CM Harrington on August 5, 2004 05:34 PM

I Forgot the last bit above… Open Standards imply that anyone can choose to implement the standard, whereas proprietary tags are usually impossible to implement properly by “outside” programmers.

Posted by: CM Harrington on August 5, 2004 06:39 PM

You have done a great job. I will use it in my re-design of one of my old web sites. I really looking forward to see more of your future work. :)

Posted by: ned on August 30, 2004 05:54 PM

About this post

In which Mark announces his short tutorial on a unique list of links...

August 4, 2004 | web standards

More Like This

By Category

Recent Posts

Monthly Archives

We Endure