CODEWITHSUNDEEP
htmlcss
AlexStack
AlexStack

Reputation: 17381

<a> link in a <li> doesn't cover the entire surface

I'm designing a navigation bar. The code looks like this:

<nav class="menu">
  <ul class="topnav">
    <li><a href="index.html">Overview</a></li>
    ...
  </ul>
</nav>

In css I have the following code for the li elements:

ul.topnav li{
    cursor:pointer;
    list-style-type:none;
    display:inline;
    float:left;
    background-clip:padding-box;
    text-align:center;
    width:139px;
    background-repeat:repeat-x;

    background-image:url(images/nav_normal.png);
    background-color:#CC33CC;
    font-size:14px;
    padding:9px 0 8px 0;
    margin:0;
    color:#6F5270;
    text-shadow:#FCF 0 1px;
}
ul.topnav li a{
    font-size:15px;
    font-weight:bold;
    padding:auto;
    color:#FFFFFF;
    text-shadow:#903 0 1px;
    text-decoration:none;
}

It generates this following button:

Different padding values

The problem is the link-clickable area (shown in blue above) doesn't cover the entire surface of the button. So when I click on the edges of the button, it doesn't work. I tried to play with padding value but couldn't solve the problem. Is there an easy and efficient way to make the link cover the whole area of the button so that it works wherever on the button the user might click?

Upvotes: 8

Views: 9535

Answers (4)

Hiram Pachicano
Hiram Pachicano

Reputation: 11

i use only this

ul.topnav li a{
    display:inline-block;
}

Upvotes: 0

punkrockbuddyholly
punkrockbuddyholly

Reputation: 9794

Make the <a> tag display:block and add the padding, width etc to the anchor.

ul.topnav li{
    cursor:pointer;
    list-style-type:none;
    display:inline;
    float:left;
    margin:0;
}

ul.topnav li a{
    display: block;
    color:#6F5270;
    text-shadow:#FCF 0 1px;
    background-repeat:repeat-x;
    background-image:url(images/nav_normal.png);
    background-clip:padding-box;
    background-color:#CC33CC;
    text-align:center;
    width:139px;
    font-size:14px;
    padding:9px 0 8px 0;
    font-size:15px;
    font-weight:bold;
    padding:auto;
    color:#FFFFFF;
    text-shadow:#903 0 1px;
    text-decoration:none;
}

Upvotes: 3

Skylar Anderson
Skylar Anderson

Reputation: 5703

Try this:

ul.topnav li a{
    font-size:15px;
    font-weight:bold;
    color:#FFFFFF;
    display:block;
    height:17px;
    line-height:17px;
    text-align:center;
    text-shadow:#903 0 1px;
    text-decoration:none;
}

Upvotes: 1

Robert
Robert

Reputation: 8767

Try setting display: block; in the CSS for ul.topnav li a.

Upvotes: 10

Related Questions