[WSG] Re: digest for wsg@webstandardsgroup.org

[Josh Rose]

Hello,  I have a nav list problem.  This is the css I'm using:

 

.links ul, .links li {

list-style: none;
}

.links li {
border: 1px solid #000000;
border-top: 0px;
}

.links li.top {
border-top: 1px solid #000000;
}

.links li a {
color: #000000;
text-decoration: none;
display: block;
text-align: center;
cursor: default;
padding-bottom: 4px;
padding-top: 4px;
}

.links li a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
cursor: default;
}

.links li a:first-letter {
border-bottom: 1px solid black;
padding-bottom: 2px;
}

.links li a#active:first-letter {
border-bottom: 1px solid white;
padding-bottom: 2px;
}

.links li a:hover:first-letter {
border-bottom: 1px solid white;
padding-bottom: 2px;
}

.links a#active {
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
}

.links a:active#active {
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
}

and the html is:

 

<ul>
    <li class="top" id="current"><a id="active" title="Accuiel" accesskey="a" href="">Accuiel</a></li>
    <li><a title="De Nous" accesskey="d" href="">De Nous</a></li>
    <li><a title="Photos" accesskey="p" href="">Photos</a></li>
    <li><a title="Contact" accesskey="c" href="">Contact</a></li>
    <li><a title="Liens" accesskey="l" href="">Liens</a></li>
</ul>

What I'm trying to do is have the accesskey underlined, it works fine in Firefox and Opera (wayhey), but in IE 6 the a:first-letter works fine, but a:hover doesn't at all (it does without a:first-letter though) and in Netscape 7 the a:first-letter doesn't work at all (just netscapes css support?) but a:hover does.  Phew.

 

The CSS is probably a bit bulky, but go easy on me, I'm newish to this.

 

Any ideas?  If at all possible I'd like to avoid CSS hacks.

 

Thanks,

Josh.

 

---

How much free photo storage do you get? Store your holiday snaps for FREE with Yahoo! Photos. Get Yahoo! Photos