Why is the buttons only clickable on the top half?

Question

You can go to my test page here: https://socialstamp.me.uk/new/testpage.php

The buttons to your left (under balance), only the top half of them can be clicked, bottom half doesn't work/click. I've checked the CSS styling file and can't find anything, I've tried many solutions but nothing works.

Button code:

             <ul>
             <li id="l2"><a href="dashboard.php"></a></li>
             <li id="l3"><a href="trackingPanel.php"></a></li>
             <li id="l4"><a href="topup.php"></a></li>
             <li id="l5"><a href="contactform.php"></a></li>
             <li id="l6"><a href="accountSettings.php"></a></li>
             <li id="l7"><a href="apiHelp.php"></a></li>
             <li id="l8"><a href="referrals.php"></a></li>  
             </ul>

CSS:

#dashContainer .col-md-2 li {
display:block; 
height: 40px;
margin-bottom: 1px;
margin-left: 15px;
margin-right: 0;
}

#l2 {
   background-image: url('../img/menu/btn3.jpg');
}
#l2:hover {

background-image: url('../img/menu/btn3h.jpg');
}
#l2:active {

background-image: url('../img/menu/btn3h.jpg');
}

And so on for several buttons...

Answer 1

I'm surprised the buttons work at all. While you define the size of the <li> , there is nothing defining the <a> and so in theory it should be of size 0, and therefore unclickable.

Make sure to apply your widths and heights to the link itself!

Answer 2

The issue is <li> tags have 41px height but <a> tags doesn't have any height except font-size. By default <a> tags displayed inline so your clickable area just taking up space as <a> tags font size. There are too many ways to fix it.

First option : ( original answer )

By giving height and width to <a> tags as container:

 #dashContainer .col-md-2 li a {
    display:block;
    height:100%;
    width:100%;
 }

Second option :

By adjusting <a> padding. No need give height to li tags if it is not important for UI .

#dashContainer .col-md-2 li {
   display:block; 
   /* height: 40px; */
   margin-bottom: 1px;
   margin-left: 15px;
   margin-right: 0;
}
#dashContainer .col-md-2 li a {
   padding:20px 0px;
}

Third option :

By giving height to <a> tags.

#dashContainer .col-md-2 li {
   display:block; 
   /* height: 40px; */
   margin-bottom: 1px;
   margin-left: 15px;
   margin-right: 0;
}
#dashContainer .col-md-2 li a {
   display:block;
   height:40px;
   line-height:40px; // for text vertical align
   width:100%;
}

Answer 3

如果您要在链接中添加CSS高度41px，则可以解决此问题。