color changes without image, color doesn't change with image

[ruldolphin]

I'm trying to use an included file for the pages on my site. This particular one displays items on the right site of each page. I'm trying to make the link change a color when on the current page. I've got that part down, but I'm trying to figure out why it won't work with my bullet. Here's the code, it may help explain:

var Conference = "<div id='navcontainer'><ul id='navlist'><li><a href='conference.htm'>Compliance Conference 2004</a></li></ul></div>";

function sidepanel() {
document.write('<center>');
document.write('<br><BR><img src="ALICOBuilding.jpg" width="140" height="190" align=center alt="ALICO Home Office"> ');
document.write('<br><br><br><br>');
document.write('<a href="http://www.adobe.com/products/acrobat/readstep2.html" target="_new"> ');
document.write('<img src="get_adobe_reader.gif" border=0></a><br> ' );
document.write(Conference);
document.write('</center>');
}

if (filenam.indexOf("conference.htm") >= 0)
{
Conference = "<div id='navcontainer'><ul id='navlist'><li><a href='conference.htm'class='current' >Compliance Conference 2004</a></li></ul></div>";
sidepanel();
document.write(Conference);
}

'Navcontainer' and 'navlist' are used to replace a blue arrow with a pink arrow when the link is hovered over. But if I include this arrow the link stay the same color no matter what. If i remove the arrow, the link changes the way I want it to. Any ideas?

[gil davis]

Without the CSS it is not much help. Can you post a link?

[ruldolphin]

No I can't post a link, but I can include the CSS code for the section:


#navcontainer ul
{
margin-left: 0;
padding-left: 2em;
text-indent: 0em;

display:inline-block;
list-style-type: none;
text-align: left;
font: normal 8pt verdana;
color:#004D9B;
}

#navcontainer ul li a
{

display:inline-block;
background: transparent url(right_arrow.gif) left no-repeat;
padding-left: 15px;
text-align: left;
font: normal 8pt verdana;
text-decoration: none;
color: #004D9B;
}

#navcontainer ul li a:hover
{

display:inline-block;
background: transparent url(right_arrow_over.gif) left no-repeat;
color: #D35B3C;
}

#navcontainer ul li a.currentmenu
{

display:inline-block;
background: transparent url(right_arrow_over.gif) left no-repeat;
color: #D35B3C;
}


This is all just for changing the color of the link and the arrow image out in front of it.

[gil davis]

Conference = "<div id='navcontainer'><ul id='navlist'><li><a href='conference.htm'class='current' >Compliance Conference 2004</a></li></ul></div>";
This calls for a class called "current". You didn't define a class called "current" in your CSS. What you posted contains a class called "currentmenu".

[ruldolphin]

Oops! I forgot to include that. My CSS file is too long to post so I just got the proper section. I do have a "current" class which is:

a.current {text-decoration:none}

a.current:link {color:#D35B3C;}

a.current:visited {color:#D35B3C;}

a.current:hover {color:#D35B3C; }


Thanks for your help.