images as links only active in small area

[Ant]

I'm going to try and explain my problem.

 

I have 3 images floated left in an existing vertical navigation list. I have replaced nav text for social media icons. All 3 images are links. When I hover over the images(each with a height of 30 pixels) only the top 5 or so pixels are links, the bottom half are not. So I assume somehow I have not defined something properly. It's probably a problem with the existing css and me trying to override it with custom nav links as images.

 

Here's the css:(i'm sure my display:inline or float:left etc is wrong in this css. I wasn't sure which to use)

 

The #menu-item-459(464,465) are the ID's of the existing menu items I'm replacing with the images.

 

------------------------------

 

#menu-item-459 a {

display:inline; float:left; height:30px; width:45px; padding:0px 0px 0px 0px; margin:0px 0px 0px 25px; outline:none; text-indent:-9999px;

background-image:url(uploads/2012/03/social_sprite.png); background-position:0 0;

}

 

#menu-item-459 a:hover { background-position:0 0px; }

 

 

 

#menu-item-464 a {

display:inline; float:left; clear:right; height:30px; width:45px; padding:0px 0px 0px 0px; margin:0px 0px 0px 8px; outline:none; text-indent:-9999px;

background-image:url(uploads/2012/03/social_sprite.png); background-position:-45px 0px;

}

#menu-item-464 a:hover { background-position:-45px 0px; }

 

 

 

#menu-item-465 a {

display:inline; float:left; height:30px; width:45px; padding:0px 0px 0px 0px; margin:0px 0px 0px 8px; outline:none; text-indent:-9999px;

background-image:url(uploads/2012/03/social_sprite.png); background-position:-90px 0px;

}

#menu-item-465 a:hover {background-position:-90px 0px;}

 

 

------------------

 

A.

[newseed]

Try display:block instead of display:inline

[Ant]

Eddie, thank you.

 

I think I figured it out.

 

There was a div below my images that was overlaying on top of half the icons. Which is why only part of the icons were clickable.

A.