Jump to content

Rollover Image


boberell

Recommended Posts

Hi, Need some help here. I am trying to create a rollover image with CSS. The code I used is: a.about_hover {display: block;width: 86px;height: 79px;text-decoration: none;background: url("../images/about_button.gif");background-position: 0;} a.about_hover:hover {background-position: -86px;} It works fine, but seems to be showing only about half of the table cell. You can see what I am talking about at: www.pumpernickelpress.com/shop/index.php Any help is greatly appreciated.

Link to comment
Share on other sites

The background-position should have two components: The offset from the top and the offset from the left. Your "a.about_hover" rule is being overridden by the "#header a" rule because ID selectors have priority.

Link to comment
Share on other sites

Ok, I changed the background-position to 0 0; and changed the hover position to -86px 0; The positions seem correct, but it is only displaying half the image from the top down. It is like the bottom half of the table cell is masked. In the html I am using: <td width="86"><a href="#" class="about_hover"></a></td> also, this is in a <div> tag.

Link to comment
Share on other sites

Like I said before, it's only displaying half the image because the height property is being overridden by another selector.

Link to comment
Share on other sites

Add an ID selector to your current selector and move the selector further down in the stylesheet than the one that's interfering: Using this selector: "#header a.about_hover"

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...