Jump to content
Killersites Forums

images as links only active in small area


Ant
 Share

Recommended Posts

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.

Link to comment
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.
Note: Your post will require moderator approval before it will be visible.

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...
 Share

×
×
  • Create New...