View Full Version : a:hover and background-position

Oct 22nd, 2009, 01:07 AM
The site: longshots-bar.com (http://www.longshots-bar.com)

I have a set of navigation thumbnails and the daily nav links that I have used CSS to change the background position when they are hovered over. The issue that i am having is that it works fine in FF but not in IE. Im pretty new to all of this so I don't know what IE does and doesn't support.

The other issue I am having also pertains to the nine Navigation thumbnails near the middle of the page. The "hover state" image is partially showing behind the Text for that link. The text itself is not enclosed in an <a> tag. I have tried changing the heights of various elements to no avail.

Thanks for any advice!


Oct 22nd, 2009, 03:03 AM
Hello admhays,
I think IE still doesn't hover anything that is not a link. I didn't try this locally but it may fix your #navleft hover... or it may not.
#navLeft a:hover{
text-decoration: none;
color: #272626;
background-position: 0px -38px;

Oct 23rd, 2009, 09:50 AM
i solved it like by adding a background image to each individual div for each day like this:

#navLinkMon a:hover{
background-image: url{"images/navLinkMon.gif");
background-position: 0px -38px;

The navLeft div doesnt actually have a background each child div does. For whatever reason when i put all the #navLink"xxx" in one CSS declaration with the background-position property it didnt work but individually it does.

Thx for the help!