[thelist] I've found a great use for <span>

[Nan Smith]

Okay, so I have just created a blank page with this horizontal menu to see
how it looked. What I do not understand is why the pipes are not showing up
when the browser supports CSS. Can someone please let me know why they don't
show?
BTW, it is a great idea!
Thanks,
Nan Smith

Subject: [thelist] I've found a great use for <span>
Example 2: A horizontal menu

Here we want to create a horizontal menu with a number of options in it. We
want these options to have funky hover over effects, backgrounds, borders
and generally look nice. In browsers that don't support CSS we want them to
be seperated by pipes (this is also an accessibility issue - Bobby at al
get annoyed if you have links with nothing seperating them apart from blank
space). Here's the HTML:

<div id="horizontalMenu">
<a href="page1.html">Page 1</a><span> | </span>
<a href="page2.html">Page 2</a><span> | </span>
<a href="page3.html">Page 3</a><span> | </span>
<a href="page4.html">Page 4</a><span> | </span>
</div>

And here's the CSS:

div#horizontalMenu a {
   display: block;
   float: left;
   width: 10em;
   background-color: #f00;
}
div#horizontalMenu a:hover {
   background-color: #ff0;
}
div#horizontalMenu span {
   display: none;
}

This will give you funky hover effect block links next to each other in a
browser with good CSS support, while browsers without CSS will display a
bunch opf links on the same line separated by pipes.

It could be argued that a more logical way of marking up the above would be
to use an unordered list - unfortunately doing so can lead to problems with
IE5 which doesn't seem to like it when list items are turned in to block
items (or something like that).