Bonjour,
J'ai un problème avec IE 7 : je crée actuellement une maquette fonctionnelle de site (xhtml transitionnel).
J'ai un bouton en image avec texte dans un span. J'utilise un hover pour le changement d'état du bouton.
Quand je survole le bouton, le texte de mon div précédent "disparait". Il faut soit sélectionner le texte, soit décaler la page en hauteur pour qu'il réapparaisse. J'ai cherché partout et essayé énormément de choses sans résultat.
Le code est valide XHTML, les styles sont valides CSS, la page a été testée sous IE 5, IE5.5, IE 6, IE 7, FF 2 : problème uniquement sur IE 7 !
code HTML :
Css :
Si quelqu'un a déjà rencontré le problème, merci de m'éclairer car la je sèche lamentablement.
Gzav
Modifié par gzav (01 Aug 2008 - 10:05)
J'ai un problème avec IE 7 : je crée actuellement une maquette fonctionnelle de site (xhtml transitionnel).
J'ai un bouton en image avec texte dans un span. J'utilise un hover pour le changement d'état du bouton.
Quand je survole le bouton, le texte de mon div précédent "disparait". Il faut soit sélectionner le texte, soit décaler la page en hauteur pour qu'il réapparaisse. J'ai cherché partout et essayé énormément de choses sans résultat.
Le code est valide XHTML, les styles sont valides CSS, la page a été testée sous IE 5, IE5.5, IE 6, IE 7, FF 2 : problème uniquement sur IE 7 !
code HTML :
<div id="fiche_description_texte">
<p><strong>Description :</strong></p>
<p>texte de description...</p>
</div>
<div id="fiche_navigation">
<a class="visite" href="index.html"><span>Demande de visite</span></a>
<a class="print" href="index.html"><span>Version imprimable</span></a>
</div>
Css :
#fiche_bas #fiche_description_texte {
padding: 0px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 8px;
font-size: 0.9em;
background-image: url(../_images/ligne_orange_h_fiche.gif);
background-repeat: no-repeat;
background-position: left bottom;
}
#fiche_bas #fiche_navigation {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 6px;
}
a.visite {
background-image: url(../_images/bt_visite.jpg);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height: 52px;
width: 136px;
display: block;
background-position: left top;
float: left;
}
a.visite:hover {
background-image: url(../_images/bt_visite.jpg);
background-repeat: no-repeat;
background-position: -136px top;
}
span {
text-indent: -5000px;
position: absolute;
left: -5000px;
top: -5000px;
}
Si quelqu'un a déjà rencontré le problème, merci de m'éclairer car la je sèche lamentablement.
Gzav
Modifié par gzav (01 Aug 2008 - 10:05)