Problems with list-style-image property 1

[Rieekan]

I'm trying to implement a left navigation menu system that shows a different image when the user has "selected" that link. I have the following so far, but when I use the class="select" to change the image, it doesn't seem to work.

#leftNav { font-size: 0.9em; font-weight: normal; background-color: #89B9E7; }
#leftNav h2 { font-size: 1.4em; font-weight: bold; color: #FFFFFF; font-style: italic; text-decoration: none; }

/* Left Nav links - Unordered list */
#leftNavList { margin-left: 1em; margin-top: 2px; padding: 0px; }
#leftNavList a {  font-size: 1.1em; color: #FFFFFF; text-decoration: none; }
#leftNavList li { list-style-image: url(/images/nav_arrowA.gif); margin-left: 1em; margin-top: 2px; padding: 0px; }
#leftNavList li.select { list-style-image: url(/images/nav_arrowB.gif); }

<div id="leftNav">
<h2>Go...</h2>
<ul id="leftNavList">
    <li><a href="/nw/auto/auto" class="select">get a quote</a></li>
    <li><a href="/nw/property/find-an-agent/property_001">find an agent</a></li>
    <li><a href="/nw/life/college-funding/Life_001">file a claim</a></li>
    <li><a href="/nw/investments-and-retirement/investments-and-retirement">plan for your retirement</a></li>
    <li><a href="/nw/investments-and-retirement/investments-and-retirement">join a retirement plan</a></li>
    <li><a href="/nw/life/college-funding/Life_001">find a financial advisor</a></li>
    <li><a href="/nw/careers/careers">apply for a job</a></li>
</ul>
</div>

Any assistance is very appreciated at this point.

 

[cLFlaVA]

you have not given any of those [tt]li[/tt] elements a class of "select".

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Rieekan]

heh That figures. You're right. I mistakenly put the class on the anchor tag.

At least Friday's almost over...

- George

 

[ChrisHunt]

An alternative approach that can work better is not to use any bullet image on the <li> at all, but to give the <a> a background image instead. like this:

#leftNavList {
   margin: 2px 0 0;
   padding: 0;
   list-style: none;
}

#leftNavList li {
   list-style: none;
   margin: 2px 0 0;
   padding: 0;
}

#leftNavList a {
   background: #89B9E7 url(/images/nav_arrowA.gif) center left no-repeat;
   padding-left: 15px; /* width of image plus a bit */
   font-size: 1.1em;
   color: #FFFFFF;
   text-decoration: none;
}

#leftNavList li.select a { background-image: url(/images/nav_arrowB.gif); }

Doing it this way makes the "bullet" image clickable as well as the text. It also allows you to change the "bullet" on mouseover if you want to.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[tsdragon]

Thanks Chris! A good way to turn a list of links into a bulleted list without losing any functionality!

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[ChrisHunt]

I'd forgotten, but a better way to place the bullet on the <a> is like this:

background: #89B9E7 url(/images/nav_arrowA.gif) [b]0.4em[/b] left no-repeat;

(You have to play around with this distance till it looks right for the image you're using)

The benefit of this over centering the image is that if the list item wraps round to a second line, a centred bullet will shift down so that it is vertically centred with respect to the whole list item. A bullet positioned with ems remains in the centre of the first line.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd