5 replies [Last post]
azjayne
Offline
newbie
Last seen: 13 years 38 weeks ago
Joined: 2008-10-23
Posts: 6
Points: 0

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: This jog only appears on the first line of text. 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!

<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;
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

About all you can do is feed

About all you can do is feed IE6 a negative right margin of -3px.

azjayne
Offline
newbie
Last seen: 13 years 38 weeks ago
Joined: 2008-10-23
Posts: 6
Points: 0

Chris, thanks for the input.

Chris, thanks for the input. Not that I want you to write code for me, but can you give me a little insight as to how I would do what you suggest? Again, I appreciate your help!

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 41 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I've never heard of 3px jog

I've never heard of 3px jog only affecting the first line. Is it really 3px jog or another bug?

We can't tell from your code if you have a Doctype. Do you?

Standard fixes for the regular (whole-column) 3 px jog is a combination of a negative margin on the floated thing on the side facing the non-floated content. This alone sometimes helps, otherwise the non-floated stuff also needs a Haslayout trigger too.

I'm no expert, but I fake one on teh Internets

azjayne
Offline
newbie
Last seen: 13 years 38 weeks ago
Joined: 2008-10-23
Posts: 6
Points: 0

FIXED

Thanks to everyone for their advice. I was able to fix the problem (figured I'd post to share) by changing the to

. Pixel jog disappears in all versions of IE (past/present) when tested at browsershots. Thanks again.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I didn't look at the code or

I didn't look at the code or page, but if the change you made fixes it, it is more likely you were simply seeing inline white space. The three pixel text jog bug has a completely different mechanism.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.