a:hover with image in <UL> not behaving

[drums]

I have posted this on some other forums but not getting help so need to expand audience.

I can't get the background to change images, only the <LI> text bg changes. I tried making the .ul and .li separate but that messed other things up.
[CODE]
ul.leftside li {
font: bold 11px Helvetica,sans-serif;
color: #FFF;
background: url(images/left_menu-bg.jpg) no-repeat;
margin: 7px 10px 5px 0px;
list-style-type: none;
text-indent: 40px;
}
#leftside li a, #leftside li a:visited, #leftside li a:active { color: #FFF; text-decoration: none; }
#leftside ul a:hover, leftside li a:hover { color: #404040; text-decoration: none; background-image: url(images/left_menu-bg_ovr.jpg); }

HTML


<ul class="leftside">
<li><a href="#">Rooms</a></li>
<li><a href="#">Reservations</a></li>
<li><a href="#">Siteseeing</a></li>
<li><a href="#">Contact Us</a></li>
</ul>


[\CODE]
The hover works but only in the <LI> and not the background for the whole <UL>.


Thanks in advance for your help!

[auslin]

You have defined: <ul class="leftside">, so all references to leftside must be .leftside, not #leftside. Plus there seems to be a couple of other problems. See if the following works:

.leftside li a {
  font: bold 11px Helvetica, sans-serif;
  color: #FFF;
  background: url(images/left_menu-bg.jpg) no-repeat;
  margin: 7px 10px 5px 0px;
  list-style-type: none;
  text-indent: 40px;
}

.leftside li a, .leftside li a:visited, .leftside li a:active { 
  color: #FFF; 
  text-decoration: none; 
}

.leftside li a:hover { 
  color: #404040; 
  text-decoration: none; 
  background-image: url(images/left_menu-bg_ovr.jpg); 
}

[drums]

Thanks but that isn't doing it either...
Here's the test site off the client domain:
Test link
Notice how only the BG of the menu text changes and not the whole BG

Here are the 2 BG images starting with the default

and here's the OVR


THANKS!

[auslin]

Just to restate the problem - background-image is being changed on :hover, but the overlying text within <a> tags is limiting the new b/g image from fully showing through when that happens.

The problem seems to be eliminated if 'li a:hover' is replaced with 'li:hover', but of course that will defeat IE6, which needs :hover to be applied to anchor tags.

See if the following alternative works:
1. Add a suitable width to the li (in accordance with the b/g image size).
2. Add 'display: block' to the 'li a:hover'.

.leftside li {
  font: bold 11px Helvetica,sans-serif;
  color: #FFF;
  /* adjust width to suit b/g image */
  width: 150px;   
  background: url(images/left_menu-bg.jpg) no-repeat;
  margin: 7px 10px 5px 0px;
  list-style-type: none;
  text-indent: 40px;
}

.leftside li a, .leftside li a:visited, .leftside li a:active { 
  color: #FFF; text-decoration: none; 
}

.leftside li a:hover { 
  display: block; 
  color: #404040; 
  text-decoration: none; 
  background: url(images/left_menu-bg_ovr.jpg) no-repeat; 
}