Problèmes avec les survols CSS dans Internet Explorer

Question

J'ai créé un site Web de portefeuille qui fonctionne actuellement bien dans Safari et Firefox mais qui a des problèmes avec IE 5, 6 et 7 (pas 8). Les rollovers Portfolio/About/Contact (CSS pur) et les vignettes (CSS pur) dans la section portfolio ne fonctionnent pas correctement (sauf sur la page splash où ils sont corrects). Ces survols ont des états "actifs" pour que vous sachiez sur quelle page vous vous trouvez etc. Les survols sont une image avec les sites actifs en bas et les sites inactifs en haut de l'image.

Mon code pour une page html exemple est la suivante:

<div id="header" > 
    <img src="images/headerTopPadding.gif" height="23" border="0" align="top"> 
    <ul id="evaNeesemannDesignMenu"> 
    <li id="evaNeesemannDesign" ><a href="../index.html"></a></li> 
    </ul> 
    <ul id="portfolioAboutContactMenu"> 
    <li id="portfolioActive"></li> 
    <li id="about"><a href="about.html"></a></li> 
    <li id="contact"><a href="contact.html"></a></li> 
    </ul> 
    <img src="images/headerTopPadding.gif" border="0" height="23" align="top"> 
    <ul id="thumbnailMenu"> 
    <li id="smsThumbActive"><a href="smsOne.html"></a></li> 
    <li id="m2Thumb"><a href="m2.html"></a></li> 
    <li id="calvinInviteThumb"><a href="calvinInvite.html"></a></li> 
    <li id="calvinMerchThumb"><a href="calvinMerch.html"></a></li> 
    <li id="vantaaThumb"><a href="vantaa.html"></a></li> 
    <li id="nurminenThumb"><a href="nurminen.html"></a></li> 
    <li id="corbThumb"><a href="corbOne.html"></a></li> 
    <li id="bpgThumb"><a href="bpg.html"></a></li> 
    <li id="nineElevenThumb"><a href="nineEleven.html"></a></li> 
    <li id="tomsThumb"><a href="toms.html"></a></li> 
    <li id="deloittePropThumb"><a href="deloitteProp.html"></a></li> 
    <li id="deloitteInfoThumb"><a href="deloitteInfo.html"></a></li> 
    <li id="turnThumb"><a href="turn.html"></a></li> 
    <li id="oedThumb"><a href="oedOne.html"></a></li> 
    <li id="networkThumb"><a href="network.html"></a></li> 
    </ul> 
</div> 

Et le css pour cette région de ce code est le suivant:

#header{ 
position:relative; 
height:120px; 
background-color:#FFFFFF; 
width:100%; 
} 

/* Eva Neesemann Design Menu Rollover */ 

#evaNeesemannDesignMenu { 
position: relative; 
margin: 0px auto; 
padding: 0px; 
width: 194px; 
height: 23px; 
background: url(images/evaNeesemannDesign.gif); 
} 

#evaNeesemannDesignMenu li { 
width: 194px; 
height: 23px; 
position: absolute; 
top: 0px; 
background: url(images/evaNeesemannDesign.gif) 0 -23px no-repeat; 
display: block; 
list-style: none; 
} 

#evaNeesemannDesignMenu a { 
width: 194px; 
height: 23px; 
display: block; 
border: none; 
} 

#evaNeesemannDesignMenu a:hover { 
border: none; 
} 

#evaNeesemannDesignMenu #evaNeesemannDesign { 
left: 0px; 
} 

#evaNeesemannDesignMenu #evaNeesemannDesign a:hover { 
background: url(images/evaNeesemannDesign.gif) 0px 0px no-repeat; 
} 


/* Portfolio About Contact Menu Rollovers */ 

#portfolioAboutContactMenu { 
position: relative; 
margin: 0px auto; 
padding: 0px; 
width: 194px; 
height: 18px; background:url(images/portfolioAboutContact.gif); 
} 

#portfolioAboutContactMenu li { 
width: 194px; 
height: 18px; 
position: absolute; 
top: 0px; 
background: url(images/portfolioAboutContact.gif) 0 0 no-repeat; 
display: block; 
list-style: none; 
} 

#portfolioAboutContactMenu a:hover { 
border: none; 
} 

#portfolioAboutContactMenu #portfolio { 
left: 0px; 
} 

#portfolioAboutContactMenu #portfolioActive { 
left: 0px; 
background-position: 0px -18px; 
} 

#portfolioAboutContactMenu #about { 
left: 75px; 
background-position: -75px 0; 
} 

#portfolioAboutContactMenu #aboutActive { 
left: 75px; 
background-position: -75px -18px; 
} 

#portfolioAboutContactMenu #contact { 
left: 127px; 
background-position: -127px 0; 
} 

#portfolioAboutContactMenu #contactActive { 
left: 127px; 
background-position: -127px -18px; 
} 

#portfolioAboutContactMenu #portfolio a:hover { 
background: url(images/portfolioAboutContact.gif) no-repeat 0px -18px; 
} 

#portfolioAboutContactMenu #about a:hover { 
background: url(images/portfolioAboutContact.gif) no-repeat -75px -18px; 
} 

#portfolioAboutContactMenu #contact a:hover { 
background: url(images/portfolioAboutContact.gif) no-repeat -127px -18px; 
} 

#portfolioAboutContactMenu #portfolio a { 
width: 75px; 
height: 18px; 
display: block; 
border: none; 
} 

#portfolioAboutContactMenu #about a { 
width: 52px; 
height: 18px; 
display: block; 
border: none; 
} 

#portfolioAboutContactMenu #contact a { 
width: 67px; 
height: 18px; 
display: block; 
border: none; 
} 

/* Thumbnail Menu Rollovers */ 

#thumbnailMenu { 
position: relative; 
margin: 0px auto; 
padding: 0px; 
width: 433px; 
height: 27px; 
background:url(images/thumbnails.jpg); 
} 

#thumbnailMenu li { 
width: 433px; 
height: 27px; 
position: absolute; 
top: 0px; 
background: url(images/thumbnails.jpg) 0 0 no-repeat; 
display: block; 
list-style: none; 
} 

#thumbnailMenu a { 
width: 29px; 
height: 27px; 
display: block; 
border: none; 
} 

#thumbnailMenu a:hover { 
border: none; 
} 

#thumbnailMenu #smsThumb { 
left: 0px; 
} 

#thumbnailMenu #smsThumbActive { 
left: 0px; 
background-position: 0px -27px; 
} 

#thumbnailMenu #m2Thumb { 
left: 28px; 
background-position: -28px 0; 
} 

#thumbnailMenu #m2ThumbActive { 
left: 28px; 
background-position: -28px -27px; 
} 

#thumbnailMenu #calvinInviteThumb { 
left: 57px; 
background-position: -57px 0; 
} 

#thumbnailMenu #calvinInviteThumbActive { 
left: 57px; 
background-position: -57px -27px; 
} 

#thumbnailMenu #calvinMerchThumb { 
left: 86px; 
background-position: -86px 0; 
} 

#thumbnailMenu #calvinMerchThumbActive { 
left: 86px; 
background-position: -86px -27px; 
} 

#thumbnailMenu #vantaaThumb { 
left: 115px; 
background-position: -115px 0; 
} 

#thumbnailMenu #vantaaThumbActive { 
left: 115px; 
background-position: -115px -27px; 
} 

#thumbnailMenu #nurminenThumb { 
left: 144px; 
background-position: -144px 0; 
} 

#thumbnailMenu #nurminenThumbActive { 
left: 144px; 
background-position: -144px -27px; 
} 

#thumbnailMenu #corbThumb { 
left: 173px; 
background-position: -173px 0; 
} 

#thumbnailMenu #corbThumbActive { 
left: 173px; 
background-position: -173px -27px; 
} 

#thumbnailMenu #bpgThumb { 
left: 202px; 
background-position: -202px 0; 
} 

#thumbnailMenu #bpgThumbActive { 
left: 202px; 
background-position: -202px -27px; 
} 

#thumbnailMenu #nineElevenThumb { 
left: 231px; 
background-position: -231px 0; 
} 

#thumbnailMenu #nineElevenThumbActive { 
left: 231px; 
background-position: -231px -27px; 
} 

#thumbnailMenu #tomsThumb { 
left: 260px; 
background-position: -260px 0; 
} 

#thumbnailMenu #tomsThumbActive { 
left: 260px; 
background-position: -260px -27px; 
} 

#thumbnailMenu #deloittePropThumb { 
left: 289px; 
background-position: -289px 0; 
} 

#thumbnailMenu #deloittePropThumbActive { 
left: 289px; 
background-position: -289px -27px; 
} 

#thumbnailMenu #deloitteInfoThumb { 
left: 318px; 
background-position: -318px 0; 
} 

#thumbnailMenu #deloitteInfoThumbActive { 
left: 318px; 
background-position: -318px -27px; 
} 

#thumbnailMenu #turnThumb { 
left: 347px; 
background-position: -347px 0; 
} 

#thumbnailMenu #turnThumbActive { 
left: 347px; 
background-position: -347px -27px; 
} 

#thumbnailMenu #oedThumb { 
left: 376px; 
background-position: -376px 0; 
} 

#thumbnailMenu #oedThumbActive { 
left: 376px; 
background-position: -376px -27px; 
} 

#thumbnailMenu #networkThumb { 
left: 405px; 
background-position: -405px 0; 
} 

#thumbnailMenu #networkThumbActive { 
left: 405px; 
background-position: -405px -27px; 
} 


#thumbnailMenu #smsThumb a:hover { 
background: url(images/thumbnails.jpg) 0px -27px no-repeat; 
} 

#thumbnailMenu #m2Thumb a:hover { 
background: url(images/thumbnails.jpg) -28px -27px no-repeat; 
} 

#thumbnailMenu #calvinInviteThumb a:hover { 
background: url(images/thumbnails.jpg) -57px -27px no-repeat; 
} 

#thumbnailMenu #calvinMerchThumb a:hover { 
background: url(images/thumbnails.jpg) -86px -27px no-repeat; 
} 

#thumbnailMenu #vantaaThumb a:hover { 
background: url(images/thumbnails.jpg) -115px -27px no-repeat; 
} 

#thumbnailMenu #nurminenThumb a:hover { 
background: url(images/thumbnails.jpg) -144px -27px no-repeat; 
} 

#thumbnailMenu #corbThumb a:hover { 
background: url(images/thumbnails.jpg) -173px -27px no-repeat; 
} 

#thumbnailMenu #bpgThumb a:hover { 
background: url(images/thumbnails.jpg) -202px -27px no-repeat; 
} 

#thumbnailMenu #nineElevenThumb a:hover { 
background: url(images/thumbnails.jpg) -231px -27px no-repeat; 
} 

#thumbnailMenu #tomsThumb a:hover { 
background: url(images/thumbnails.jpg) -260px -27px no-repeat; 
} 

#thumbnailMenu #deloittePropThumb a:hover { 
background: url(images/thumbnails.jpg) -289px -27px no-repeat; 
} 

#thumbnailMenu #deloitteInfoThumb a:hover { 
background: url(images/thumbnails.jpg) -318px -27px no-repeat; 
} 

#thumbnailMenu #turnThumb a:hover { 
background: url(images/thumbnails.jpg) -347px -27px no-repeat; 
} 

#thumbnailMenu #oedThumb a:hover { 
background: url(images/thumbnails.jpg) -376px -27px no-repeat; 
} 

#thumbnailMenu #networkThumb a:hover { 
background: url(images/thumbnails.jpg) -405px -27px no-repeat; 
} 

Vous pouvez consulter le site actuel à http://www.evaneesemanndesign.com

Actuellement, j'ai essayé d'utiliser z-index et de mettre différentes images en arrière-plan pendant le rollover ... aucune de ces options ne fonctionne. Je sais que IE a des problèmes avec les rollovers mais je ne suis pas sûr de la solution à suivre ... d'autant plus que cela fonctionne dans certaines sections du site.

Toute aide serait grandement appréciée.

Merci.

Madison

Answer 1

J'ai essayé en mode de compatibilité IE (qui devrait bien correspondre à au moins IE7), essayez de remplacer #thumbnailMenu li et #portfolioAboutContactMenu li ce qui suit:

#thumbnailMenu li { 
    /* Difference being that the width and display properties were removed */ 
    position: absolute; 
    list-style: none; 
    background: url(images/thumbnails.jpg) no-repeat 0 0; 
    height: 27px; 
    top: 0; 
} 

#portfolioAboutContactMenu li { 
    /* Difference being that the width and display properties were removed */ 
    width: 194px; 
    height: 18px; 
    top: 0px; 
    background: url(images/portfolioAboutContact.gif) 0 0 no-repeat; 
    list-style: none; 
} 

Au moins, il fonctionne de cette façon (puisque je n'ai pas de "vrai" environnement IE6/7 pour le tester). Faites-moi savoir comment est le résultat. Je suis sûr que vous snagged sur un vieux Internet Explorer bug :)

Answer 2

simplement supprimer la propriété text-align de les balises html, body et #pagewidth:

html, body{ 
margin:0; 
padding:0; 
} 

#pagewidth{ 
width:800px; 
margin-left:auto; 
margin-right:auto; 
} 

Ou ajouter un « text-align : la gauche;" aux tags #portfolioAboutContactMenu, #thumbnailMenu. Cependant, pour un meilleur positionnement du moteur de recherche, je vous suggère d'utiliser des solutions de remplacement de texte, car les robots analysent la source de la page Web, et dans le vôtre il y a peu de contenu textuel; cela améliore aussi l'accessibilité de votre page web. De plus, je suggère d'ajouter l'attribut "alt" aux balises "img"!