100% page 1/2 of sliding door code in the click Area

BLOG address: http://www.planabc.net/article.asp? Id = 107

Friends who are studying the standard will generally come into contact with the CSS sliding door technology during the learning process. Maybe everyone has read this article, "Sliding Door Technology in CSS". if you have not touched or have not read the above or forgotten content, you can click the link of the above article to learn about or review it.

In the example of a sliding door in CSS, you may have carefully tested and discovered that there are nine pixel blind spots in the connection area that cannot be clicked, and in IE, only the text part size can be clicked, and the entire button block cannot be clicked. However, we may expect that the entire button block can be clicked, and blind spots are not allowed.

So how can we implement it? Next we will discuss some solutions:

First, for convenience, we should first move the code in CSS Sliding Door Technology:
XHTML section:

Copy codeThe Code is as follows: <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:Copy codeThe Code is as follows: # 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 {
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 {
Background-image: url ("right_on.gif ");
Color: #333;
Padding-bottom: 5px;
}

Xmlns = "http://www.w3.org/1999/xhtml">

• Home
• News
• Products
• About
• Contact