CODEWITHSUNDEEP
csshtml-listshyperlink
user2499454
user2499454

Reputation: 197

CSS ul li links issue

I have this site here: http://jamessuske.com/freelance/seasons/

At the bottom you will see social media icons and the issue I am having is when I put my mouse over them, they are not clickable, only when I move my mouse to the left a little bit and I do not understand what I did wrong:

HTML

<ul class="social-media">
<li class="twitter"><a href="#">&nbsp;</a></li>
<li class="instagram"><a href="#">&nbsp;</a></li>
<li class="facebook"><a href="#">&nbsp;</a></li>
</ul>

CSS

ul.social-media{
    padding-top:30px;
}

ul.social-media li{
    float:left;
    padding-left:5px;
    list-style:none;
}

ul.social-media li.twitter{
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
    background-position-x:0px;
    width:25px;
    height:26px;
}

ul.social-media li.instagram{
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
    background-position-x:-26px;
    width:25px;
    height:26px;
}

ul.social-media li.facebook{
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
    background-position-x:-52px;
    width:25px;
    height:26px;
}

Any help would be appreciated. Thanks.

Upvotes: 0

Views: 1585

Answers (3)

Landlocked Surfer
Landlocked Surfer

Reputation: 433

The size of the clickable area depends on the content of the a tag. Your a tag does not have any content. One solution is to apply your background image directly to the a tag and changing the display attribute to block.

ul.social-media li.twitter a {
  background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
  background-position-x:0px;
  width:25px;
  height:26px;
  display: block;
}

Note that we also need to set display to block since the anchor tag is an inline element by default. The width and height attributes only have an effect on block elements.

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105853

it is probably because your links are so small. try this :

 .social-media a {
    display:block;
    height:100%;
    width:100%;
}

So they fill entire <li> and stand over sprite.

Upvotes: 0

Kevin Lynch
Kevin Lynch

Reputation: 24703

It's because of the padding-left you have set on the li element

Upvotes: 0

Related Questions