single-line 3 pixel jog in IE/Win

I'm trying to wrap text around an adjoining div and have done so successfully in FF3 and Safari3. However, when testing/validating there is a 3 pixel text jog in IE6 and earlier. NOTE: The jog only appears on the first line of text, all other lines are fine. Is there a css filter or IE hack to cure this issue? Code specific to the issue and applicable css is below; complete code and Web page illustrating problem at: http://www.quittersblog.com/tfa/test.html. Thank you in advance for your help - much appreciated!

<code>

<div id="banner"><img src="images/banner.jpg" alt="A fact about tobacco." /></div>

<div id="content"> <!-- CONTENT STARTS HERE -->

<div id="intro"><h1>Home</h1>
<br /><h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas pretium fringilla quam.</h2></div>

<div id="related"> <!-- RELATED STARTS HERE -->

<div class="related-text" id="level1">Related Information:</div>

<div id="level2"><span class="related-arrows">&gt;</span> <a href="#">link to first item</a></div>

<div id="level3"><span class="related-arrows">&gt;</span> <a href="#">link to second item</a></div>

<div id="level4"><span class="related-arrows">&gt;</span> <a href="#">link to third item</a></div>

<div id="level5"><span class="related-arrows">&gt;</span> <a href="#">link to fourth item</a></div>

</div> <!-- RELATED ENDS HERE -->

<span class="body-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas pretium fringilla quam. Nam facilisis pellentesque nisi. Sed id dolor eu mauris gravida posuere. Vivamus dignissim, elit in pretium sagittis, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas pretium fringilla quam. Nam <a href="#">facilisis</a> pellentesque nisi.<br />
<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas pretium fringilla quam. Nam facilisis pellentesque nisi. Sed id dolor eu mauris gravida posuere. Vivamus dignissim, elit in pretium sagittis, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas <a href="#">pretium fringilla</a> quam. Nam facilisis pellentesque nisi. Sed id dolor eu mauris gravida posuere. Vivamus dignissim, elit in pretium sagittis, libero.</span>

</div> <!-- CONTENT ENDS HERE -->

@charset "UTF-8";
#banner {
float: left;
width: 584px;
}
#content {
padding: 20px;
float: left;
width: 544px;
}
#intro {
float: left;
width: 544px;
padding-bottom: 20px;
}
#intro h1 {
font-size: 135%;
color: #79ae3a;
font-weight: bold;
}
#intro h2 {
font-size: 90%;
line-height: 120%;
color: #0f96c4;
font-weight: bold;
}

/* CSS Document */

#related {
float: right;
width: 180px;
margin-top: 5px;
margin-left: 12px;
margin-bottom: 12px;
}
#related a {
font-size: 75%;
color: #FFFFFF;
text-decoration: none;
}
#related a:hover {
font-size: 75%;
color: #FFFFFF;
text-decoration: underline;
}
#level1 {
width: 170px;
padding-top: 10px;
padding-bottom: 5px;
background-color: #79ae3a;
padding-left: 10px;
}
#level2 {
width: 170px;
float: right;
padding-top: 5px;
padding-bottom: 5px;
background-color: #79ae3a;
padding-left: 10px;
}
#level3 {
width: 170px;
float: right;
padding-top: 5px;
padding-bottom: 5px;
background-color: #79ae3a;
padding-left: 10px;
}
#level4 {
width: 170px;
float: right;
padding-top: 5px;
padding-bottom: 5px;
background-color: #79ae3a;
padding-left: 10px;
}
#level5 {
width: 170px;
float: right;
padding-top: 5px;
padding-bottom: 10px;
background-color: #79ae3a;
padding-left: 10px;
}
#adhs {
text-align: center;
float: left;
width: 195px;
padding-top: 20px;
padding-bottom: 25px;
}
#sfa {
float: left;
width: 195px;
padding-bottom: 25px;
}
.body-text {
font-size: 85%;
line-height: 140%;
}
.body-text a {
font-weight: bold;
color: #0f96c4;
text-decoration: none;
}
.body-text a:hover {
font-weight: bold;
color: #0f96c4;
text-decoration: underline;
}
.related-text {
font-size: 85%;
font-weight: bold;
color: #FFFFFF;
}
.related-arrows {
font-size: 85%;
color: #FFFFFF;
}

</code>