Help with rollover images in navigational list menu

[dthomas31uk]

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

 

[Vragabond]

First background is on the li element, they you change it on anchor element. That will not work. This will work:

#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:hover {
  background:white url("ImagesNew/bulletRoll.gif") right no-repeat;
}

However not in IE, since it does not understand pseudo classes on anything but anchor elements. My advise is to change the code so that links within li are blocks of 100% and they have the background image. That way you could make it work.

As a side question -- Why is all the text on your page in headings?

 

[BabyJeffy]

but that does not work.[/qoute]
You only tested it in IE didn't you? Your code would word fine in Firefox. Unfortunately IE doesn't support the :hover class on anything other than the anchor tag (at present).

You should check this page to find a non-javascript solution that will work for you.

http://wellstyled.com/css-nopreload-rollovers.html

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[BabyJeffy]

[quote]but that does not work.[/qoute]

And I'm guilty of not using the Preview functionality to prevent stupid typos like the one above

Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[dthomas31uk]

Once again. Vragabond. Thanks.....that worked a treat. Get confused about the lists.....don't know enough info about them

Cheers for your time

Thanks

 

[dthomas31uk]

Yeah, just checked in IE and it does not work cause of the hover tag aaarrrrggggggghhhhh!!!

 

[dthomas31uk]

Have now used some Javascript to get it to work in IE6, but the arrows are not aligned.

http://www.exploitation.org.uk/index2.html

This the Javascript

I have used

<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>

Any ideas why they are not in the same position???

 

[Vragabond]

Your JS does absolutely nothing. That JS says that when you hover with a mouse over li elements, it should add a class called over to those li element. However, you have no class called over defined. So it does nothing.

You are however appending hover state for links in IE with this line:

*html a:hover{
background:white url("ImagesNew/bulletRoll.gif") right no-repeat;
}

This adds a hover state for the link in IE, while in other browsers you are using hover on li elements. That is why in IE the background appears in the link part and in others it is in the li. If you want my advice?

1. Remove the JS. While it is ok to use it somewhere, you should go without.
2. Recode the list so that links (<a>) are block level elements that occupy the whole li and have the background.
3. Remove the background from li.
4. Switch the backgrounds with a, a:hover in all browsers.