...

View Full Version : text artifact in IE 6



jpm121
05-08-2008, 05:36 PM
http://www.jpmeredith.com/ptsc/test2/socialsvcs.html

This page renders fine in Firefox, but in IE I'm seeing extraneous text at the end of the sentence with "sponsored by the United Way."

The last 7 characters,

"ed Way."

are appearing again on their own line below the rest of the text. This happens on some other pages in the site as well.

I've tested this on several PCs with the same results in IE 6

Code is tested and compliant with W3C validator, I know the CSS isn't as clean as I'd like but I inherited this project part way through and I'm trying to tie up loose ends.

Candygirl
05-08-2008, 06:45 PM
This tricky bug can appear in different cases. Usually there are some float occupying 100% of their container involved or/and comments in the html.

My opinion is that it is related to the 3px jog. Try to fix your container's width to 633px: the bug disappear. Try width 632px: it doesn't work...

You can try with the #content's width: with 630px on #container, try 437px on #content; no bug anymore. 438px = bug

An idea is to give a 3px negative margin-right just for IE6; for exemple:


* html #content {
margin-right:-3px;
}

Personally, I prefer to avoid the bug appears rather than to correct it. You can do that omitting the padding-right:


#content {
float: left;
width: 440px;
padding: 15px 0 15px 15px;
background-color: #fff;
}
This is better I think ;)

If you don't want to change anything in your css you may try removing all your html's comments and find which one are involved in the bug...

harbingerOTV
05-08-2008, 06:49 PM
add this:



#content p { position: relative; }


don't ask why because I honestly don't know. I've had this situation before and this was the fix. I haven't read about the reson for the solution anywhere yet though.

alternatively you could just write


p { position: relative; }


and nip it in the bud from the get go.

jpm121
05-08-2008, 08:59 PM
add this:

don't ask why because I honestly don't know. I've had this situation before and this was the fix. I haven't read about the reson for the solution anywhere yet though.



Wow, what a crazy little bug that is, but the position:relative fixed it on all the pages. Thanks so much for sharing your expertise!

Candygirl
05-08-2008, 10:41 PM
Have you try with the padding ?

Giving a position:relative to all you paragraphs could have some consequences on your design depending of the context. Omitting the padding-right as I suggested would have no consequence at all, just avoid the bug. Prevention is better than cure...

But it's up to you ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum