11548 sujets

JavaScript, DOM et API Web HTML5

JQuery hover // marche pas très bien avec IE 8

Bonjour,

Je suis en train d'ajouter des effets sur un site internet que je suis entrain de concevoir, et en testant sur les différents navigateurs, je peux m’apercevoir que pour iexplorer ça va pas très bien. Smiley ohwell

mon problème concerne l'affichage des balises <em> de mon menu horizontal.

Au passage du curseur de la souris sur une des images de mon menu, la balise <em> concernée apparait et disparait si j'enlève le curseur.

Les navigateurs testés sans problème :

Firefox
Chrome
Opéra
Safari

Il n'y a que sur IExplore 8 que ça déconne

ça s'affiche comme je le souhaite mais pas au bon endroit :

je vous montre en image pour les navigateurs avec l'affichage valide :


http://img580.imageshack.us/img580/9094/90455517.jpg
http://img816.imageshack.us/img816/3140/62178504.jpg

autre exemple :
http://img706.imageshack.us/img706/5535/91941956.jpg


Maintenant je vous montre l'affichage de IExplorer :

http://img716.imageshack.us/img716/2423/1iez.jpg
http://img593.imageshack.us/img593/4388/2ie.jpg

vous voyez le décalage ?

voici mon code html :


<!--début userscript -->
				<div id="menu2">
				<div class="menu">
					<div id="nav">
						<ul>
							<li style="width:104px;" class="current"><a href="accueil.html">
								<img src="images/accueil-plein1.png" alt="" width="104" height="43" /></a>
							</li>
							<li style="width:75px;"class="notcurrent"><a href="concept.html">
								<img src="images/concept.gif" alt="" width="75" height="11" /></a>
								<em> Le concept nom de la société </em>						
							</li>
							<li style="width:185px;"class="notcurrent"><a href="offres-commerciales.html">
								<img src="images/offres-commerciales.gif" alt="" width="185" height="11" /></a>
								<em> Profitez de nos différentes offres commerciales </em>						
							</li>
							<li style="width:97px;" class="notcurrent"><a href="references.html">
								<img src="images/references.gif" alt="" width="97" height="11" /></a>
								<em> Retrouvez toutes nos références </em>						
							</li>
							<li style="width:75px;"class="notcurrent"><a href="contact.html">
								<img src="images/contact.gif" alt="" width="75" height="11" /></a>
							<em> Contactez nous </em>						
							</li>		
						</ul>
					</div>
				</div>			
				</div>
			<!--fin userscript -->


mon code css pour la balise <em> :

#nav em {
    position: absolute;
    top: -20px;
    background: none repeat scroll 0 0 #94B246;
    font-style: normal;
    padding: 2px 10px;
}



et le code de mon fichier userscript.js

$(document).ready(function(){

$(' .menu em ').hide();
$(' #menu1 a ').hover(function(){
$(this).siblings('em').show();
$(this).siblings('em').animate({ top: '-5px' }, 'slow');
}, function(){
$(this).siblings('em').animate({ opacity: 'hide', top: '-15px' }, 'slow');
});
$(' #menu2 a ').hover(function(){
$(this).siblings('em').animate({ opacity: 'show', top: '5px' }, 'slow');
}, function(){
$(this).siblings('em').animate({ opacity: 'hide', top: '5px' }, 'slow');
});
$(' #menu3 em ').css({ left: '-10px' });
$(' #menu3 a ').hover(function(){
$(this).siblings('em').animate({ opacity: 'show', top: '-10px', left: '0' }, 'slow', function() {
$(this).css({ background: '#000000', color: '#FFFFFF' });
}
);
}, function(){
$(this).siblings('em').css({ background: '#E6DCC8', color: '#333333' }).animate({ opacity: 'hide', top: '-20px', left: '20px' }, 'slow',
function() {
$(this).css({ left: '-10px' });
}
);
});
});


Merci de m'indiquer des pistes à suivre pour résoudre mon problème.
Merci à tous Smiley smile
Modifié par sofiane06 (22 Apr 2011 - 11:19)
Bonjour,

Disons que le problème porte surtout sur les styles CSS.

Deux pistes de solution:

- Il faut vérifier que IE8 affiche bien la page en mode de rendu standard et pas en mode de compatibilité IE7 ou en mode Quirks. Si ce n'est pas le cas, se renseigner sur cette question.
- De mémoire, IE7 a du mal à placer correctement les éléments positionnés en absolu lorsqu'on ne précise pas de coordonnée left ou right. Il me semble qu'un left:0 serait utile ici. Bien sûr, les éléments EM doivent être positionnés en absolu par rapport à leur parent (des LI, en l'occurrence). Si on ne sait pas exactement comment définir le référent d'un élément positionné en absolu, on pourra relire un article de référence sur le sujet.
yes tout à fait juste.

Merci de ton aide,

j'ai donc créer une classe pour chaque <em> en spécifiant une largeur différente (pour mes besoins)

je vous montre le code pour un des <em> :


#nav em.accueil {
    position: absolute;
	left:17px;
	width:132px;
	float:right;
    top: -20px;
	background: none repeat scroll 0 0 #94B246;
    font-style: normal;
    padding: 2px 10px;
	margin-left:0px;
}
Sujet clos
Aller à