100% Click the sliding door code of the area

Learning standards of friends, generally in the process of learning to contact the CSS sliding door technology, perhaps we have read the article "CSS Sliding door technology", if you have not touched or have not seen the above or a little forget the content, it is OK, you can click on the above article link, first understand or review it again.

In the "Sliding door technology in CSS" article in the sliding door example, we have carefully experimented, may have found that the link area has a 9-pixel blind spot can not click, and in IE, can only click the text portion size, can not click the entire button block. What we might expect is that the entire button block can be clicked, and no blind spots are allowed.

So how do we make it work? Let's explore some of the solutions here:

First of all, to make it easier for us to first move the code in the sliding door technology in CSS:
XHTML section:

<div id= "header" >    <ul>      <li><a href= "#" >Home</a></li>      <li id= " Current "><a href=" # ">News</a></li>      <li><a href=" # ">products</a></ li>      <li><a href= "#" >About</a></li>      <li><a href= "#" >contact</a ></li>    </ul>  </div>

CSS section:

#header {    float:left;    width:100%;    Background: #DAE0D2 URL ("bg.gif") repeat-x bottom;    font-size:93%;    Line-height:normal;  }  #header ul {    margin:0;    padding:10px 10px 0;    List-style:none;  }  #header li {    float:left;    Background:url ("Left.gif") no-repeat left top;    margin:0;    padding:0 0 0 9px;  }  #header a {    float:left;    Display:block;    Background:url ("Right.gif") No-repeat right top;    padding:5px 15px 4px 6px;    Text-decoration:none;    Font-weight:bold;    Color: #765;  }  /* commented backslash Hack     hides rule from Ie5-mac \*/  #header a {float:none;}  /* End ie5-mac hack *  /#header a:hover {    color: #333;  }  #header #current {    background-image:url ("Left_on.gif");  }  #header #current a {    background-image:url ("Right_on.gif");    Color: #333;    padding-bottom:5px;  }

