28172 sujets

CSS et mise en forme, CSS3

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 :
<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. Smiley bawling

Gzav
Modifié par gzav (01 Aug 2008 - 10:05)
Bonjour,

Merci Trigun pour ton astuce : j'ai essayé et cela fonctionne. Par contre, pourrais-tu me donner un début d'explication sur ce phénomène...

Pour ma part, j'y avait vu un lien avec le contenu flash de ma page car dès que je le retirais, mon texte restait en place au survol.

En tout cas, merci encore !!!!!
C'est un bug d'IE , il n'y a pas d'explication particulière je pense. Si quelqu'un sur le forum a une explication plus constructive, je suis preneur.
Oui je suis preneur aussi car j'aime bien "comprendre" : en tout cas maintenant ça marche (je note cette astuce et je la garde précieusement... Smiley cligne ).
Maintenant je vais me recoller les cheveux que je me suis arrachés hier !

A +