PDA

View Full Version : IE Dupe content issue


dancrew32
05-29-2008, 08:16 PM
So I'm experiencing the IE6 duplicate content problem (read about it here (http://www.positioniseverything.net/explorer/dup-characters.html))

however, it doesn't seem to be related to html comments as I tried removing them and the issue would remain.

Issue is on this site: http://tinyurl.com/649hr5

Note: I am using a full-height hack, so the content appears to tuck underneath the footer. You can see the duplicate content if you make your IE6 font size "smallest".

1,000,000 internets to whoever can point out what makes it tuck behind and a possible fix!! =] Thanks for your help

_Aerospace_Eng_
05-29-2008, 08:42 PM
Its the negative margin that makes it tuck underneath it. Usually what I do is put the footer within the container (wrap), make it position:absolute; and give the content enough padding to overcome the height of the footer. If I need to clear floats I use the technique discussed here: http://positioniseverything.net/easyclearing.html

Its possible that the negative margin is causing those dup characters. Add the stuff in green, remove the stuff in red.
#main {
clear:both;
float:left;
width:100%;
padding-bottom:128px;
background:#111 url(i/main_back.gif) repeat-x 0 0;
}
#main:after {
content:" ";
display:block;
clear:both;
}
#footerwrap {
position:relative;
clear:both;
margin:-148px auto 0 auto;
position:absolute;
height:148px;
width:800px;
color:#fff;background:#f00 url(i/footer_back.gif) repeat-x left top;
}
* html #footerwrap {
margin-top:-148px;
}

Be sure to make a backup of you stylesheet. Your footerwrap div will also need to be inside of your #wrap div.

dancrew32
05-29-2008, 09:49 PM
In FF the footer sticks to the top and in IE6 the footer disappears.. looks like the dupe content issue still is there too.. any ideas?

here's the link again: http://tinyurl.com/649hr5

Thanks for your help

Candygirl
05-29-2008, 10:58 PM
Well it seams that you and _Aerospace_Eng_ forgot some things ;)

First of all you must add a bottom:0 to your #footerwrap:

#footerwrap {
position:absolute;
bottom:0;
height:148px;
width:800px;
color:#fff;
background:#f00 url(i/footer_back.gif) repeat-x left top;
}

Then you forgot to remove the float:left from #main. This is why your footer is not yet at the correct place (and I think this would also remove the dupe content issue):

#main {
clear:both;
float:left;
width:100%;
padding-bottom:148px;
background:#111 url(i/main_back.gif) repeat-x 0 0;
}

_Aerospace_Eng_ suggested you to erase the width:100% as well but I think he missed it was useful to give the layout to IE (IE does not know about the pseudo-element :after).

dancrew32
05-29-2008, 11:11 PM
Thank you both so much! ya saved my butt!! Works like a charm in both now =]

have a nice day