IE problèmes de positionnement

Dans tous les navigateurs sauf IE, sur euroworker.no/order la petite flèche verte sous le mot "produkt" se trouve sur le dessus de mon conteneur div. Pourquoi dans le monde cela ne fonctionne-t-il pas dans IE? La chose est, cela fonctionne sur deux pages sur quatre dans IE, mais tous les quatre dans d'autres navigateurs. Toutes les pages sont construites de la même façon, mais pour IE, il affiche cette chose comme 20px au-dessus de la RoundBigbox.IE problèmes de positionnement

Des idées les gars?

Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS pour le haut indicateur de prgress:

#checkoutProgress 
{ 
    width: auto; 
    padding-top: 1em; 
    height: 30px; 
    overflow:hidden; 
    font-family: "Helvetica"; 
    font-size:18px; 
    float:left; 
/* margin-bottom:22px;*/ 
    margin-left:0px; 

} 

#checkoutProgress a 
{ 
    padding: 10px; 
    /*border-width: 2px; 
    margin-right: 20px;*/ 
    text-decoration:none; 
    font-size: 17.26px; 
    color:#dadada; 
    text-transform:uppercase; 

} 

#checkoutProgress a:hover 
{ 
    padding: 10px; 
    /*border-width: 2px; 
    margin-right: 20px;*/ 
    text-decoration:none; 
    font-size: 17.26px; 
    color:#818072; 

} 

/* completed steps */ 
#checkoutProgress a.completed 
{ 
    border-color: #70D66D; 

} 

/* current step */ 
#checkoutProgress a.active 
{ 
/* border-color: #ADD8E6;*/ 
    font-weight: bold; 
/*background-color: #fffccc; 
border-color: #ADD8E6;*/ 
background-image:url(../../upload/urhere_arr.png); 
background-position:bottom center; 
/*padding-left:15px;*/ 
color:#a3a398; 
}

Pour la boîte:

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; 
    }

fieldset css:

fieldset.container 
{ 
    border: 0; 
}

Et certains HTML:

<fieldset class="container"> 

    <div id="checkoutProgress" class="progressCart"> 

       <a href="/order" class=" active" id="progressCart"><span>Produkt</span></a> 
       <a href="/checkout/selectAddress" class="completed " id="progressAddress"><span>kunde info</span></a> 


       <a href="/checkout/shipping" class="completed " id="progressShipping"><span>Leveringsmåte</span></a> 

       <a href="/checkout/pay" class="" id="progressPayment"><span>Betaling & Fullfør</span><</a> 
      </div> 

    </fieldset>   </div> 



       <form action="/order... > 

    <input type="hidden"...> 
    <div id="roundbigbox"> 
    <p id="pro">Produkter</p> 
    More content 

    </div>

Source

2010-04-09 Kyle

Votre fragment HTML apparaît mal formé, il y a un couple de fin et des balises de fermeture qui n'avez pas un match!

La première chose à faire est de valider votre XHTML (très important dans le strict doctype) avec le w3c validator. Une autre chose à surveiller avec IE est l'espace aléatoire - ne me demandez pas pourquoi, mais essayez de vous assurer qu'il n'y a pas d'espace supplémentaire. Ces types de comportements "aléatoires" dans IE ont généralement une source dans ces problèmes, je pense.

Source

2010-04-09 08:55:24 dmp

Il suffit de regarder votre site - vous avez également un certain nombre de problèmes d'indexation z. Certainement le temps de frapper le validateur! :) – dmp

Grande idée! Je ferai juste ça. – Kyle

Eh bien, j'ai l'impression que mon mac est tombé en panne, donc pas d'édition à faire maintenant, merci quand même. – Kyle

Répondre

Questions connexes