Aligning hover image with BG image

[adammc]

Hi Guys,
I am having trouble working out how to line up the hover background image with the background image for a mouseover effect.
It is currently putting the hover BG image ''x.gif' over the text instead of in the same position as 'bullet.gif'

You can san see a demo here:
[nofearcomputing.com...]

HTML
----------

<div id="vertmenu">
<ul>
<li><a href="#" tabindex="1">Home</a></li>
<li><a href="#" tabindex="2">About Us</a></li>
<li><a href="#" tabindex="3">Computing</a></li>
<li><a href="#" tabindex="4">Web Sites</a></li>
<li><a href="#" tabindex="5">Games</a></li>
<li><a href="#" tabindex="6">Links</a></li>
</ul>
</div>

CSS
----------

#navcontainer ul
{
list-style-type: none;
text-align: left;
}

#navcontainer ul li a
{
background: transparent url(images/bullet.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; color:#33CC00; font-weight:bold;
text-decoration: none;
color: #999;
border-bottom: 1px dashed #FF9933;
}

#navcontainer ul li a:hover
{
background: transparent url(images/x.gif) left center no-repeat;
color: black;
border-bottom: 1px dashed #FF9933;
}

#navcontainer ul li a#current
{
background: transparent url(images/x.gif) left center no-repeat;
color: #666;
border-bottom: 1px dashed #FF9933;
}

[Setek]

Hi adammc, remember you're not allowed to drop URIs like that, please check out the CSS Forum Charter [webmasterworld.com] and the Webmaster World Terms of Service [webmasterworld.com].

Now, about your problem...

You're forgetting these very important blocks of code:

1. #vertmenu ul li {
   margin: 0px;
   padding: 5px;
   padding-left: 15px;
   background: transparent url(images/bullet.gif) left center no-repeat; }

   
   

2. #vertmenu ul li a {
   font-size: 85%;
   display: block;
   border-bottom: 1px dashed #FF9933;
   padding: 5px 0px 2px 4px;
   text-decoration: none;
   color: #33CC00;
   width:100px; }

It's actually the first block that's calling the bullet.gif originally, -not- your

#vertmenu ul li a

.

The code you have posted is incorrect -

#vertmenu ul li a

is not calling the background, the

#vertmenu ul li

is in your working example.

I hope from there on you can understand where you're going wrong :)

Let me know if you have any other problems.

[adammc]

Hi, thanks for the reply.
Sorry about the URL, i didnt know :(

I figured it out, thanx for the pointer :)