[RESOLVED] Solution found: I finally realized that the closing </a> tag comes before the <span> tags in the initial HTML code provided in the question, which was causing the issue! Thank you to everyone for your assistance!! This just goes to show that making changes to someone else's code when you're tired can lead to problems :) – dev101
I've searched high and low, tried numerous solutions, but this particular issue is really getting to me. I know how to make a standard li element clickable as a block hyperlink, but when I insert a <span> tag inside the li, only the area around the <a...> within the **div** displays as a link, not the entire li container. Any suggestions?
HTML code
<li>
<a class="category" href="http://link...">link_title</a> <span>(some text)</span>
</li>
After numerous attempts, the only acceptable design wise option I found was just a hover highlight effect (without link functionality) like this:
CSS code
div.category ol li,div.category ul li{
display:inline-block;
height: 100%;
width: 100%;
}
div.category ol li:hover,div.category ul li:hover{
display:inline-block;
height: 100%;
width: 100%;
background-color:#EEE;
}
No matter what I try, the elements always break into a new row or behave unexpectedly, and only the portion behind the <a> tag is clickable inside the wrapper div (or ol/ul element). Any insights?
Thanks, dev101
Revised code by removing div.category, but the issue still persists:
.category ul,.category ol{
list-style: none;
border: none;
margin: 0px;
}
.category ul li,.category ol li{
display:inline-block;
height: 100%;
width: 100%;
}
.category ul li:hover,.category ol li:hover{
background-color:#EEE;
}
.category ul li a,.category ul li a:visited,.category ol li a,.category ol li a:visited{
display:block;
height: 100%;
width: 100%;
}
/* Attempted to align span to left/right - still breaks into new non-clickable line */
.category span{
float:left;
}