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

[Rich Gray]

Nan

Because this CSS entry says any spans within divs that have an id of
'horizontalmenu' should not be displayed. As your browser understands CSS it
obeys this instruction and the pipe is not displayed because it is contained
in such a span....

div#horizontalMenu span {
   display: none;
}

... any clearer? I didn't think so! :)
Cheers
Rich
-----Original Message-----
From: thelist-admin at lists.evolt.org
[mailto:thelist-admin at lists.evolt.org]On Behalf Of Nan Smith
Sent: 01 August 2002 17:05
To: thelist at lists.evolt.org
Subject: RE: [thelist] I've found a great use for <span>


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).

--
For unsubscribe and other options, including
the Tip Harvester and archive of thelist go to:
http://lists.evolt.org Workers of the Web, evolt !