When creating a Floating Div, the border in the area next to it does not go
behind the float, instead it is in the foreground.  This is not correct
behavior and in fact was working correctly in IE6.

I have screen shots of this in both IE6 and IE7 should anyone care to see
it.  

Using xHTML 1.0 Strict DocType on Win XP Pro SP2 and  IE7 RC1

HTML
div id="photo"></div>
<div id="banner">
    <h1>SMART ACT</h1>
    <h2>Accessibility Center for Testing</h2>
    <ul id="mainnav">
    <li><a href="#">Home</a></li>
    <li class="current"><a href="#">Project</a></li>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Reporting</a></li>
    <li><a href="#">Options</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Logout</a></li>
</ul>
</div>

CSS

div#photo{
    background-image: url(eye.png);
    background-repeat: no-repeat;
    background-position: top left;
    width: 141px;
    height: 130px;
    float: left;
    margin-right: 3em;
}

div#banner h2{
    font-size: 1.8em;
    font-style: italic;
    color: #844B2C;
    border-bottom: .15em solid #00545A;
}