Weird duplicate IE div.
- by Kyle Sevenoaks
Here's a weird bug I've found, IE8 is duplicating my div, but only a part of it.
How it looks in IE8:
And here's how it's meant to look in FF:
And the HTML:
<div id="roundbigbox">
<p id="pro">Produkter</p>
<table id="cart">
<div id="titles">
<div id="thinlinecopy"></div>
<div id="varekodetext">
<p>Varekode</p>
</div>
<div id="produkttext">
<p>Produkt</p>
</div>
<div id="pristext">
<p>Pris</p>
</div>
<div id="antalltext">
<p>Antall</p>
</div>
<div id="pristotaltext">
<p>Pris total</p>
</div>
<div id="sletttext">
<p>Slett</p></div>
<div id="thinline"></div>
</div>
...content...
<div class="delete">
<a id="slett" href="/order/delete/1329?return=" title="Slett"><!--Slett--></a>
</div>
</div>
CSS for FF:
d
iv #roundbigbox {
background-image:url(../../upload/EW_p_og_L.png);
background-position:top center;
background-repeat:no-repeat;
padding:5px;
padding-top:10px;
padding-bottom:0px;
width:760px;
height:1%;
border-width:1px;
border-color:#dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
z-index:1;
position:relative;
overflow:hidden;
margin:0;
margin-bottom:10px;
}
CSS for IE:
div #roundbigbox {
background-image:url(../../upload/EW_p_og_L.png);
background-position:top center;
background-repeat:no-repeat;
padding:5px;
padding-right:50px;
padding-top:10px;
padding-bottom:-20px;
width:760px;
height:1%;
border-width:1px;
border-color:#dddddd;
z-index:1;
position:relative;
overflow:hidden;
margin:0;
margin-bottom:10px;
}
What could cause such a weird bug? It's not duplicated in the HTML. I am stumped!
Thanks for any responses.