Strange duplicate IE div
Here is a strange error I found, IE8 duplicates my div, but only part of it.
What it looks like in IE8:

And this is how it looked in FF:

And HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
\/\/\
<div id="roundbigbox">
<p id="pro">Produkter</p>
<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:
div #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;
}
IE CSS:
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;
width:760px;
height:1%;
border-width:1px;
border-color:#dddddd;
z-index:1;
position:relative;
overflow:hidden;
margin:0;
margin-bottom:10px;
}
What could be causing such a strange error? It is not duplicated in HTML. I'm stumped!
Note . There are many other sections inside each other.
Thanks for any answers.
+2
a source to share
5 answers
I would say the same thing as: graphicdivine. (remove the extra </div>
at the end) plus you look at your CSS:
- negative shims don't exist: P (even in IE)
- you can set your paddings with just one declaration: padding: top right bottom left
-
same for border and background:
background: url (../../upload/EW_p_og_L.png) top center no-repeat; border: 1px solid #ddd; / * when you have a hex color with 6 same characters just write 3 of them * /
+2
a source to share