single-line 3 pixel text jog in IE6/Win

[azjayne]

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: <snip>. 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>

[edited by: swa66 at 11:58 pm (utc) on Oct. 23, 2008]
[edit reason] no personal URLs, please see forum charter [/edit]

[swa66]

3px jogs next to floats in IE6 aren't the easiest of bugs in IE to fix, but it revolves on either the normal flow gaining hasLayout, or usign a negative 3px margin.
There are a number of ways to give hasLayout, and not all work in all conditions. I like to try first with zoom:1 in a conditional comment so only IE6 sees it.

[SuzyUK]

Hi azjayne, and Welcome to WebmasterWorld!

this actually isn't the 3px text jog, it's related to the IE double margin float thing, it is actually documented on PIE as Float Indent [positioniseverything.net]

the fix is the same as the Double margin bug, hence me saying they're related:

add display: inline; to the #related div

btw, if you increase the left margin on that float you will see that the unwanted indent matches that margin