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