Trying to add checkmarks to Eric Meyer's tabbed navbar list style

Cannot get background-image to work in CSS

[ANewton]

Hi,

I am using Eric Meyer's tabbed navbar list as described at the Listamatic site (http://css.maxdesign.com.au/listamatic/horizontal05.htm).

I am using this list as a navigation device atop a group of pages that comprise a tutorial. It works great.

I am trying to customize the list style slightly by adding check marks to the visited list items. I got the idea for the check marks at Simon Collison's web site - [colly.com...]

Sadly, I cannot get the effect to work exactly as I want it in either Firefox 3.0 or IE 6.0.

My css looks like this:

#navlist
{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #777788;
font: bold 12px Verdana, sans-serif;
}

#navlist li
{
list-style: none;
margin: 0;
display: inline;
}

#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #777788;
border-bottom: none;
background: #96BCD6;
text-decoration: none;
}

#navlist li a:link { color: #000000; }
#navlist li a:visited { color: #000000; }

#navlist li a:hover
{
color: #000000;
background: #CFDBE7;
border-color: #227;
}

#navlist li a#current
{
background: #FFFFFF;
border-bottom: 1px solid white;
}

I tried modifying the following:

#navlist li a:visited { color: #000000; }

like so:

#navlist li a:visited { color: #000000; padding-right: 14px; background-image: url('checkmark.gif') top right no-repeat }

The result of which is that no check mark image appears and the background color of the styled list items is #96BCD6.

When I change it to:

#navlist li a:visited { color: #000000; padding-right: 14px; background: url('checkmark.gif') top right no-repeat }

The check mark image appears, but the background color of the styled list items is #000000.

I want the background color of the styled list items to be #96BCD6 *AND* I want the check mark image to appear.

Anyone have any ideas?

Thanks in advance for your time and help.

[Fotiman]

In those cases where you're only setting the background color, try defining the rule as:

background-color: #96BCD6;

instead of

background: #96BCD6;

The shorthand version is essentially setting the background image to none.

[ANewton]

Thank you for this suggestion. However, I am still not able to get both the check mark image and #96BCD6;.

Am I correct that you were suggesting the following (this is what my css looks like now)?

#navcontainer
{
margin-top:2em;
margin-bottom:2em
}

#navlist
{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #777788;
font: bold 12px Verdana, sans-serif;
}

#navlist li
{
list-style: none;
margin: 0;
display: inline;
}

#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #777788;
border-bottom: none;
background-color: #96BCD6;
text-decoration: none;
}

#navlist li a:link { color: #000000; }
/* #navlist li a:visited { color: #000000; } */
#navlist li a:visited { color: #000000; padding-right: 14px; background-image: url('checkmark.gif') top right no-repeat }

#navlist li a:hover
{
color: #000000;
background-color: #CFDBE7;
border-color: #227;
}

#navlist li a#current
{
background-color: #FFFFFF;
border-bottom: 1px solid white;
}

[Fotiman]

Close, but you are overloading background-image.

Try this:

#navlist li a:visited { 
  color: #000000; 
  padding-right: 14px; 
  background-image: url('checkmark.gif');
  background-repeat: no-repeat;
  background-position: top right;
}

[ANewton]

BINGO! That does the trick.

Thanks very much for taking the time to help me out. Very much appreciated.