I have the following HTML:
<!DOCTYPE html>
<html>
<head>
<style>
#nav {
float: left;
width: 10em;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0 20px;
}
#nav li {
margin-top: 9pt;
position: relative;
}
#nav a {
border: solid 1px black;
display: block;
width: 10em;
padding: 3px 0;
}
</style>
</head>
<body>
<div id="container1">
<div id="container2">
<div id="nav">
<ul>
<li><a href=".">Welcome</a></li>
<li><a href="news">News</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="faq">FAQ</a></li>
<li><a href="charity">Charity</a></li>
<li><a href="committee">Committee</a></li>
</ul>
</li>
</ul>
</div>
<div id="section">If this p is here, the block links no longer work.<br><br><br></div>
</div>
</div>
</div>
</body>
</html>
In IE8 the text in #section prevents the whitespace in a block link from being a link. While there is text to the right, the whitespace in the links breaks. When the #section div ends, the links work fine and the whole thing is a link rather than just the text.
How would I make the whole a element a link all the time, rather than just the text when the #section div interfers? I've tried z-order to no avail.