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: alt text

And this is how it looked in FF: alt text

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


Added this right after the markup div, it fixed it.

<div style="display:none; width:100%; margin-bottom:10px;"> </div>

      



A strange problem. Thanks for your help!

0


a source


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


You have an extra </div>

at the end.

+1


a source


It looks like there might be an error in your stylesheet:

IE CSS:

div #roundbigbox {
    ...
    padding-bottom:-20px;
    ....
}

      

This may be the reason why the bottom will fit like this.

0


a source


try to take comment from <a>

 tag

Sounds strange, but I've seen problems with this ... <!--Slett-->

0


a source







All Articles