CSS Set Graphics Not Clickable

Why can't I click my graphics?

HTML:

<div class="column-right-social">

    <ul>
        <li id="facebook"><a href="#"></a></li>
        <li id="twitter"><a href="http://www.twitter.com/"></a></li>
        <li id="mail"><a href="/contact-us"></a></li>
    </ul>

</div>

CSS:

.column-right-social ul{
    width:250px;
    margin:0px;
    padding:0px;

}

.column-right-social ul li{
    开发者_运维问答width:80px;
    height:80px;
    list-style-type:none;
    float:left;
}

.column-right-social #facebook{
    background:url('../image/facebook.png') no-repeat;

}

.column-right-social #twitter{
    background:url('../image/twitter.png') no-repeat;

}

.column-right-social #mail{
    background:url('../image/mail.png') no-repeat;

}

Backgrounds are not clickable. Your <a> tags have no contents, therefore the browser will render them as a 0x0 (aka invisible) area. You need to put some height/width on the <a> elements as well.

You could change it to:

<div class="column-right-social">

<ul>
    <li id="facebook"><a href="#"><img src="../image/facebook.png" /></a></li>
    <li id="twitter"><a href="http://www.twitter.com/"><img src="../image/twitter.png" /></a></li>
    <li id="mail"><a href="/contact-us"><img src="../image/mail.png" /></a></li>
</ul>

I would try adding:

div.column-right-social ul li a{
 width: 100%;
 height: 100%;
 display: block;
}

Shai.

Because your images are being set as the background to the tag, not the anchor. your anchor also has no content, so it's not really rendering any click area.

Either add an onclick to your tags that do the same as your anchor, Or change the size of your tag to fill the whole

Some advice, never have an empty tag. You want something there, especially for SOE. You can always hide it through CSS:

<a class="test" href="#"><span>My Anhor</span></a>

css

.test
{
   background:url('../image/twitter.png') no-repeat;
   width:32px;
   height:32px;
   //set your image properties here and width/height
}

.test span
{
  display:none;
  //or move them WAYY off the screen, or font 0, etc. hide it. 
}

This way screen readers will still read your anchor properly as the CSS will be ignored. And it will be displayed as you want it in browsers.

You have to define the backgrounds for the a-elements and not the li-elements, if you want to make them clickable.

Example:

.column-right-social #twitter a {
  background: …
  width: …
  height: …
}

Anyway, the current approach is not good, because browsers which have not loaded the images yet (or are not able to show images) will display "nothing" instead of an alternative image text which describes the hyperlink.