Jump to content
Sign in to follow this  
boberell

Rollover Image

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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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"

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...