boberell Posted May 1, 2012 Share Posted May 1, 2012 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 More sharing options...
Ingolme Posted May 1, 2012 Share Posted May 1, 2012 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 More sharing options...
boberell Posted May 1, 2012 Author Share Posted May 1, 2012 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 More sharing options...
Ingolme Posted May 1, 2012 Share Posted May 1, 2012 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 More sharing options...
boberell Posted May 1, 2012 Author Share Posted May 1, 2012 I am fairly new at CSS. Can you tell me how to change that? Link to comment Share on other sites More sharing options...
Ingolme Posted May 1, 2012 Share Posted May 1, 2012 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 More sharing options...
boberell Posted May 1, 2012 Author Share Posted May 1, 2012 Thank you. That worked great! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now