Q:

Floating block links broken in IE

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.

A:

The solution was to add a background color to #nav

