Mon, 2005-09-12 11:49
Hi, Am creating a webpage and have encountered a problem.
I have my page
http://www.exploitation.org.uk/index2.html
On the left of the page I have 3 links
Luxury Mobile Homes in Tenerife
Luxury Mobile Homes in France
Siteplan
I have created a list using css which I created with help from listomatics website. The problem I now have is that I want to place a different colored bullet on rollover. I currently have a grey arrow and need to change the image ("ImagesNew/bulletRoll.gif") an orange arrow when rolled over. How can I do this????
This is the css code for the current links
#navcontainer{
float:left;
}
#navlist
{
padding-left: 0px;
margin-left: 10px;
border-bottom: 1px solid gray;
width: 210px;
}
#navlist li {
background:white url("ImagesNew/bullet.gif") right no-repeat;
list-style: none;
margin: 0;
padding: 0.5em;
padding-right:1em;
border-top: 1px solid gray;
}
Have tried using
#navlist li a:hover {
background:white url("ImagesNew/bulletRoll.gif") right no-repeat;
list-style: none;
margin: 0;
padding: 0.5em;
padding-right:1em;
border-top: 1px solid gray;
}
but that does not work. Any ideas
Cheers
Mon, 2005-09-12 12:32
#1
Help with rollover images in navigational list menu
I can't see why that wouldn't work, as that's exactly the way you should do it.
HOwever, just a note:
#navlist li {
background:white url("ImagesNew/bullet.gif") right no-repeat;
list-style: none;
margin: 0;
padding: 0.5em;
padding-right:1em;
border-top: 1px solid gray;
}
Have tried using
#navlist li a:hover {
background:white url("ImagesNew/bulletRoll.gif") right no-repeat;
list-style: none;
margin: 0;
padding: 0.5em;
padding-right:1em;
border-top: 1px solid gray;
}
For the hover, you do not need to repeat every element - you only need to specify the changes:
#navlist li {
background:white url("ImagesNew/bullet.gif") right no-repeat;
list-style: none;
margin: 0;
padding: 0.5em;
padding-right:1em;
border-top: 1px solid gray;
}
Have tried using
#navlist li a:hover {
background:white url("ImagesNew/bulletRoll.gif") right no-repeat;
}
like that.
The only thing I can think of is the image can't be found.
What do you mean by 'doesn't work'?
Mon, 2005-09-12 13:29
#2
Help with rollover images in navigational list menu
I think you have given the initial background to the li and are then asking the a:hover to show the new background but it cant because the li background is still showing.
Try taking the background off #navlist li and put it on to #navlist li a instead. This should then allow #navlist li a:hover to change to the required on-hover background.
Mon, 2005-09-12 13:59
#3
Help with rollover images in navigational list menu
Yeah, the problem now lies with IE. Have managed to get the orange arrows to appear in firefox , but the hover element is not supported in IE
#navlist li {
background:white url("ImagesNew/bullet.gif") right no-repeat;
list-style: none;
margin: 0;
padding: 0.5em;
padding-right:1em;
border-top: 1px solid gray;
}
#navlist li:hover {
background:white url("ImagesNew/bulletRoll.gif") right no-repeat;
}
Mon, 2005-09-12 14:24
#4
Help with rollover images in navigational list menu
Binary is spot on - you should apply the background image to the anchor itself, not the list item.
Then you can use a and a:hover
Mon, 2005-09-12 14:27
#5
Help with rollover images in navigational list menu
Yeah, I agree pineapple head, but the problem now lies in that the hover element is not supported in IE
Mon, 2005-09-12 14:47
#6
Help with rollover images in navigational list menu
Hover is supported in IE - on anchors only.
Mon, 2005-09-12 14:52
#7
Help with rollover images in navigational list menu
On anchors???????
They don't work when using nav lists... I can assure you.....been trying to get a fix sorted......aaarrgghhh 
Mon, 2005-09-12 15:10
#8
Help with rollover images in navigational list menu
Works for me.
Mon, 2005-09-12 15:53
#9
Help with rollover images in navigational list menu
<ul>
<li> <a href="blah"> link </a> </li>
</ul>
ul li a {background-image etc}
ul li a:hover {background-image etc}
Like that.