Forum Moderators: not2easy

Message Too Old, No Replies

Fixing a Navigation Menu with "accesskey", need help please

how to show the first-letter underlined

         

tito

1:24 am on Sep 9, 2006 (gmt 0)

10+ Year Member



Hello,

i have the following navigation menu built with accesskey function, it works when i type alt+(accesskey) and on NS and FF i can even see the accesskey letter on mouse over (not in IE6).

the only problem is that it doesn't show the first-letter underlined, please what i'm doing wrong?

Thanks in advance,
tito

HTML
----

<div id="navcontainer">
<ul id="navlist">
<li id="nav-home"><a href="http://" accesskey="h" title="home">Home</a></li>
<li id="nav-things"><a href="http://" accesskey="t" title="things">Things</a></li>
<li id="nav-e-mail"><a href="http://" accesskey="e" title="e-mail">E-mail</a></li>
</ul>
</div>

CSS
---

#navlist { padding-left: 0px; margin-left: 0px; margin-top: 15px; }
#navlist li { list-style: none; color: #F27A5F; font-weight: bold; padding: 4px 0 5px 5px; background: url(../images/dotted.gif) repeat-x bottom left; }
#navlist li a { text-decoration: none; }
#navlist a:hover {color: #333;}
a:first-letter { text-decoration: underline;}
.ie_fix a { text-decoration: none; }
#navlist a:hover:after, #navlist a:focus:after {
content: " [" attr(accesskey) "] ";
}
#navlist a#active a {color: #333;}

/*--NAV CURRENT--*/
#home #nav-home a,
#things #nav-things a,
#e-mail #nav-e-mail a {
color: #333; }

encyclo

1:34 am on Sep 9, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try applying the
first-letter
to the
li
instead of the anchor:

#navlist li:first-letter {text-decoration:underline;}

That should work if placing it on the anchor doesn't do it. :)

tito

1:47 am on Sep 9, 2006 (gmt 0)

10+ Year Member



Thank you!
it doesn't work with IE6, it works fine with FF and NS.
i have also tried to remove .ie_fix a { text-decoration: none; }, but still doesn't work with IE6.

swa66

12:36 pm on Sep 12, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Make sure to have "link-visited-hover-active" in that order.

MSIE's parser has problems: try adding spaces (esp there is need for a space (not a comma) after :first-letter .
So, you must think of it as ":first-letter " not ":first-letter". Thanks Microsoft!

Tip: when debugging: try to remove as much as possible and still retain the problem. It often leads to a better understanding of the problem.

Also you might be suffering from chaining of pseudo elements and classes in MSIE:
[satzansatz.de...]
and specificity problems in MSIE:
[satzansatz.de...]
Note the long workaround for the first one (I'd strongly recommend to stay away from hacks). Also note that some of these have been fixed in MSIE7 (if and when it becomes popular it might solve some of the torture we get when trying to make things work) a pity there seems to be no attempt today at backporting the bugfixes in MSIE7 to MSIE 6 .

[edit reason]tidying, pls send a sticky if you want to talk to a Mod, per TOS ;) - re: Creative Commons, It would be most welcome if you quote, attribute (Ingo) and help explain the relation of your links to "accesskey" if you want? the nature of Creative Commons is that you take and learn from it?

[edited by: SuzyUK at 11:01 pm (utc) on Sep. 13, 2006]

tito

10:46 pm on Sep 13, 2006 (gmt 0)

10+ Year Member



Thank you swa66!

LVHA is in that order, and ":first-letter " with the space as well, but still it doesn't work.
I will check better the links you've turned to me and i will try to debug as per yr suggestions, i will let you know tomorrow.

Thanks so much,
tito