Bizzare IE6 replicating content issue!

[theboypayne]

Hi there,
I've got a strange situation where IE is replicating content inside a <div> and placing it below the element in question!

Take a look in IE :

http://www.leger.co.uk:8090/battlefields/index.aspx

I thought this might be a case of changing floats/clears in the CSS but it's not that simple, as IE is actually displaying the text twice, inside and outside the <div>!

Bizzare hey?!

Any ideas guys?

CSS and HTML below, thanks in advance!



--------------------------------------

<div class="selwrap right byp">
<div class="seltop"><h2>D-Day Dakota Experience &amp; Operation Overlord</h2></div><!-- End btop div -->
<div class="selmid">
<a href="fdk.aspx">D-Day Dakota Experience &amp; Operation Overlord</a>
</div>
<!-- End brolink div -->
<div class="selbott"></div><!-- End bbottom div -->
</div><!-- End bwrap div -->

--------------------------------------





/*
CSS Document
Last updated by: Dru Hill
Last updated date: 04 November 2005
Copyright: Leger Holidays
*/


/********************************** Battlefields selection boxes **********************************/

.left{
width:201px;
margin:0px 10px 10px 0px;
padding:0;
float:left;
}

.right{
width:201px;
margin:0px 0px 10px 0px;
padding:0;
float:left;
}

.seltop{
height:34px;
overflow:hidden;
}

.seltop h2{
text-indent:-9999px;
margin:0;
padding:0;
}

.selmid{
/*Height needs to be specified because of ie - it acts like a min-height so the box does not shrink below this size.*/
height:56px;
padding-left:10px;
padding-right:80px;
padding-top:4px;
overflow: hidden;
clear: none;
}

/*This hack is just for firefox - it needs this to make the div resize if the text is made bigger.*/
div[class] .selmid{
min-height:56px;
height:auto;
}

#content a {
font-size:1.1em;
color: #333;
text-decoration:none;
}

#content a:link, #content a:visited{
font-size:1.1em;
color: #333;
text-decoration:none;
}

#content a:hover, #content a:active{
font-size:1.1em;
color: #333;
text-decoration: underline;
}

.selbott {
height:14px;
overflow:hidden;
}

/********************************** **********************************/

------------------------------------------------

[LinhGB]

I was speechless the 1st time I saw that bug too.

http://www.positioniseverything.net/...haracters.html

Removing your HTML comments (esp in the floating divs) is one way to fix it.

[theboypayne]

Wow, how strange is that!

Many, many thanks for that LinhGB! My team were losing their minds with this!

Just for info if anybody else comes across this, here's the URL with the answer:

http://www.positioniseverything.net/...haracters.html

I tried removing my html comments, but with little joy.

However, applying a margin of -3px to the right floating div did the trick!

[all4nerds]

Hello

position relative, a haslayout problem in IE

.r{position:relative;}

<a href="fdk.html" class="r">D-Day Dakota Experience &amp; Operation Overlord</a>

[LinhGB]

No worries. That is my pet IE bug hehehe (gotta love that browser). The weirdest thing is that the duplicated "characters" cannot be selected as normal text. They appear as an image (or almost like one) instead. The -3px margin didn't work for me in my case, but removing the comments did.