I have a problem with the last rollover image on my navigation bar. It worked OK until I added the "class last" to the unordered list for the right hand seperator image. The anchor link still works but the rollover is only working on the right hand side of the section. I have racked my brain trying to see why this is happening but to no avail. I hope one of you good people can look at it and show me where I have gone wrong. Thank you in advance for any help.
From what I can see you need to put the .last on the li tag where it will stay on the a tag and on a:hover. As it is on the a tag and the image is only 30 px wide your a:hover is only affecting that width, not the whole li tag.
So your a:hover state is affecting your <a class="last"> as I said previously.
However, my previous solution does not work for you as you are using background images for the separators and they cannot be in two positions on the same tag, unless your li tags have a width and the background image for the "last" had the separator on each side. If you were using borders, you could place a left border on all the tags and on the "last tag" have a left and right border.
This solution will work for you, but it is a bit of a hack HTML
It means you are adding an extra li tag which has no use but to add the separator at the end of the Contact tag and hiding the hover effect by showing background: none.
I have a problem with the last rollover image on my navigation bar. It worked OK until I added the "class last" to the unordered list for the right hand seperator image. The anchor link still works but the rollover is only working on the right hand side of the section. I have racked my brain trying to see why this is happening but to no avail.
I hope one of you good people can look at it and show me where I have gone wrong.
Thank you in advance for any help.
Athelstan
link http://iandelemare.justfree.com/test/
.navBar ul li .last {
background-image:url(../images/seperator.jpg);
background-position:right center;
background-repeat:no-repeat;
The background hover image is 12px wide by 30px high and repeated in the x axis.
Athelstan
.navBar ul li .last {background-image:url(../images/seperator.jpg);
background-position:right center;
background-repeat:no-repeat;
but it is on the a tag in the html
So your a:hover state is affecting your <a class="last"> as I said previously.
However, my previous solution does not work for you as you are using background images for the separators and they cannot be in two positions on the same tag, unless your li tags have a width and the background image for the "last" had the separator on each side. If you were using borders, you could place a left border on all the tags and on the "last tag" have a left and right border.
This solution will work for you, but it is a bit of a hack
HTML
CSS
.navBar li.last a:hover {background-image: none;
}
It means you are adding an extra li tag which has no use but to add the separator at the end of the Contact tag and hiding the hover effect by showing background: none.