Discuss: Spruced-Up Site Maps

I’m not the author, however, I think you two missed the point entirely – Kim is being overly generous. Anyone can accomplish this effect just by throwing markup at the problem. The idea here is to pull this off with as little CSS markup in the HTML as possible. Being able to achive this effect with CSS on a plain HTML file is the Holy Grail we’re after, and this is why the article appeared on ALA.

Oliver,

What version of Opera? It looks fine to me in Opera 7.54.

Peter,

Using list-style-image was my first thought too. But it seems difficult or impossible to get the bullet image to be clickable using that method as well as some alignment issues between the browsers. SimpleBits references it a few times in some of their articles including the one linked in the story. Of course, if I’m mistaken I’d love to see a link to the technique.

http://www.simplebits.com/notebook/2004/07/18/clickable.html

Thanks for the article, Kim! – Seth

posted at 03:32 pm on March 30, 2005 by Seth House

22 Please let me bore you to death

- Dan Ced*a*rholm -> Cederholm – “Voil�” needs a grave accent, not an acute one

A nice article by the way.

posted at 03:52 pm on March 30, 2005 by Fran�ois

23 Spelling

Thanks Fran�ois. I guess the many proofreaders of the text don’t check for spelling errors. :)

This article was sent for publication last summer. Since then, I have been made aware of the spelling of Cederholm.

http://www.simplebits.com/notebook/2004/08/26/nyt.html

always call others on their grammatical/spelling errors. I should expect no different.

I’m glad you liked the article.

Thanks for the kind words, Seth.

posted at 04:31 pm on March 30, 2005 by Kim Siever

24 Tree-view with CSS

Hmm, this reminds me of one of my earlier projects! Take a look at:

http://www.twinhelix.com/dhtml/checktree/

The formatting is all via CSS; for the topic at hand, just ignore the scripted INPUT boxes and selected-counter SPAN elements.

Anyway, it’s an example of a treeview control complete with “dashed-lines” (as in Windows Explorer) and plus/minus expansion icon indicators; the only real compromise I had to make was a CLASS=“last” attribute on the last LI element in each UL to get the dashed lines right, due to IE not supporting useful selectors (sigh). It uses similar margin-based layout to this article’s example for positioning background images; I hope you guys find it useful :).

posted at 06:52 pm on March 30, 2005 by Angus TUrnbull

25 Tree-view with CSS

Hmm, this reminds me of one of my earlier projects! Take a look at:

http://www.twinhelix.com/dhtml/checktree/

The formatting is all via CSS; for the topic at hand, just ignore the scripted INPUT boxes and selected-counter SPAN elements.

posted at 06:52 pm on March 30, 2005 by Angus Turnbull

26 Old hat

I’m not entirely sure of the point of this article…

I mean, you took some nested lists and changed their background image based on their heirarchy? Not really breaking any new ground there…

As someone else pointed out, you don’t need class the root UL.

You also shouldn’t use single quotes for declaring background image url, IE Mac doesn’t like it… Best to use doubles, or even better nothing at all…

Why did you left-pad the li and then negative margin the li a the same amount?

“The first example I ever come across of an icon-styled unordered list made exclusively with CSS.”

Where have you been for the last 5 years? ;)

I’m sorry, but where are the editors atm? This article was obvious, small, with simple CSS that still managed some basic errors.

posted at 07:12 pm on March 30, 2005 by anon

27 painting bug in IE6

Seems to be something funky with the way this redraws in IE6 – you end up with doubled up icons (ironically, exactly the thing you went to great pains to avoid).
I know its a minority browser but I thought it worth mentioning.

posted at 07:44 pm on March 30, 2005 by anon

28 Re: Old hat & Painting bug

anon,

As I said, it has been months since I wrote the article. I have learned more about CSS since I wrote it. If I had to do it today, I wouldn’t use quotes for the background image.

“Why did you left-pad the li and then negative margin the li a the same amount?”

I don’t recall for sure. I believe it was because the anchor was pushed over too far or the background images were too far to the right. Had I written the article a couple of weeks ago, I could probably say for sure.

“Where have you been for the last 5 years?”

Again, I searched for something like this for months. If it was out there, it wasn’t SEO’d. I couldn’t find an example anywhere I looked, and no one I asked knew of one.

Is your declaration that article is obvious and small meant to be negative criticism? I was not aware articles on ALA needed to be subtle and large. Besides, if it was that obvious, why had no one else apparently documented it. Regarding basic errors, can you be specific?

anon,

IE6 was the first browser in which I tested it, and I did not see this problem. I just checked IE6 again (on two computers) and still don’t see double icons.

posted at 09:23 pm on March 30, 2005 by Kim Siever

29 feedback

I guess the errors I am referring to are the not using UL UL and instead classing the root UL. Likewise with the quotations. Also see my note below about url(none).

I’m not sure how you would find it in a search engine, it’s kinda like searching for “adding a background image to a tag”, it’s obvious. ;)

I was not meaning to criticise the article for its size. I was just suprised that such a small article with tiny amount of CSS was able to published with the errors/issues described.

I can replicate the issue in IE6, on load the second Edmonton Campus (the one that is a link) has both the folder icon rendered, and then the page icon on top of it. It disappears if you scroll that part of the page out of the viewport and back in. It re-appears when you hit refresh.

I think its to do with declaration issues on your background styles. You might want to force a background color as transparent. Also background: url(none) may work by the filesystem failing to find the file, but its totally wrong. You should just use the keyword “none”.

Try explicitly declaring your background styles and we’ll see if that fixes the problem.

posted at 11:25 pm on March 30, 2005 by anon

30 Javascript : less markup, more flex

At our site, we restrict this “icon styled list item” stuff to our help environment navigation, where this kind of styling can be perceived as ‘conventional’.

Basically, we transform an XML file into nested lists with no added CSS hooks whatsoever. In stead, we search the DOM through javascript to determine whether a list item is the last in line or descends further into child elements. The javascript dynamically adds different classes (‘parent’, ‘child’, ‘lastchild’ and ‘current’) to the markup, while the css uses this extra markup to display different icons (closed folder, opened folder, file icon etcetera).

I’m sorry I can’t give you a URI, but our site is a closed extranet environment. Thought this approach might be helpful though to readers interested in learning more about this.

posted at 01:11 am on March 31, 2005 by Tim Wouters