Wednesday 10 July 2002

Accessibility tip 17: Use real lists

Though I was already using “real list markup” for my blogroll and other links, I was using a definition list (<dl>) with the definition term (<dt>) as the heading and multiple definition descriptions (<dd>) as the list items. Although the HTML specification allows multiple terms and descriptions, an unordered list is probably more suited to lists such as a blogroll.

Following Mark Pilgrim’s suggestion, I converted my Contents, Recent Entries, and Favorites to unordered lists—turning the list bullets off with a list-style: none declaration and removing the indenting with a zero left margin.

This recreated the look of the original (definition list) blogroll in Internet Explorer 5 & 6 and Opera 6 but not in Netscape 6.2 and Mozilla 1, where the list items remain indented and my navigation panel now looks vile. Definition lists with a zero left margin worked in Netscape and Mozilla so I’m not sure what’s going on. Hopefully someone can suggest a fix; otherwise it’s back to the definition list for me.

<later>Professor Salo solved the problem: define the padding-left as zero, as well as margin-left. She also tactfully mentioned that she’d “Found the fix on one of the links in Mark’s tip today.” As in:

Which raises the issue of why—instead of having a nervy turn—didn’t I read either or both those articles? I guess that’s a question better directed to a psychotherapist than an accessibility guru. Alternatively, it could just be that I believed false information about how different browsers handle lists and indentation or failed to think things through sufficiently well. I do know one thing though: I’m really angry about how the various browsers use different default values for margin and padding of lists.</later>

Permalink | Technorati

Comments

Set padding-left to 0 not on <li> but on <ul> (or on whatever class or id you have assigned to that list).

Worked beautiful on AKMA's page. And yes, that precise thing was driving me utterly bananas.

Found the fix on one of the links in Mark's tip today.

Posted by Dorothea Salo on 10 July 2002 (Comment Permalink)

Did Mark add those articles later in the day? If not then I missed them when I first checked his article because I blogged a couple of them myself thinking he hadn't linked to them - but then I might have just missed them at the bottom of the article. I'm a huge fan of unordered lists now, I find myself applying them to all kinds of things (most sites have a list of items somewhere) and with a bit of CSS you can style them to do pretty much anything you like. The css-discuss mailing list has an interesting thread today about using CSS to create /inline/ lists so you can use list markup but have list items appearing in a comma seperated sentence in the middle of a paragraph.

Posted by Simon Willison on 10 July 2002 (Comment Permalink)

I think Mark did add some links later on, in fact.

Cute trick, inline lists. Not hard, either, I wouldn't think; just set display on <ul> and/or <li> to inline and add the comma and space to li+li:before.

At least I think that's how to do it.

Now, Jonathon, you have a duty to do something constructive with that anger, you know. ;)

Posted by Dorothea Salo on 10 July 2002 (Comment Permalink)

Jonathon, your inability to read all of the information provided is an obvious manifestation of your subliminal need to have someone take care of you.

Overtly, you were asking for help with CSS; in actuality, you were looking for your mother.

Now, now. No need to get _angry_ at yourself. We all trip up and forget to think things through at times; or worse, follow information falsely given.

There, there. It will be alright.

Posted by Burningbird on 10 July 2002 (Comment Permalink)

Gah! I'm not old enough to be Jonathon's mother!

Posted by Dorothea Salo on 10 July 2002 (Comment Permalink)

'scuse, Dorothea.

Ahem.

Jonathon, your inability to read all of the information provided is an obvious manifestation of your subliminal need to have someone take care of you.

Overtly, you were asking for help with CSS; in actuality, you were looking for <edit> a strong and intelligent feminine figure</edit>

...

Posted by Burningbird on 10 July 2002 (Comment Permalink)

This discussion is now closed. My thanks to everyone who contributed.

© Copyright 2007 Jonathon Delacour