Bug de l'état du survole sous internet explorer 7

Question

zbexworld

23 Nov 2009 à 11:30

Bonjour tout le monde.
j'ai une galerie d'image intégrée sous forme des éléments li,a l'etat du survole une image s'affiche tranquillement sous firefox et internet explorer 8,pourtant sous internet explorer 7 une partie de l'image du survole se place derrière l'element suivant de la liste li.
j'ai pris un screenshot de la situation sous ie7

voici le code html


<ul class="hoverbox">
<div class="box" style="float: left; padding-left: 5px; padding-bottom: 5px;">
			<li>
		<a href="#">		
			<img style="margin-bottom: 3px;" alt="sous nuage" src="http://yapasphoto.ma/extranet/Upload/Clients/Thumb/admin@siway.fr/475218_avglinks.bmp" class="img_alb"/>
			<img class="preview" alt="sous nuage" src="http://yapasphoto.ma/extranet/Upload/Clients/admin@siway.fr/475218_avglinks.bmp"/>				
		</a>	
		</li>
																																																																																																																						<br/><a href="javascript:showDialog('Attention','Vous êtes sur le point de supprimer une photo<br /><br />
									<a href=\'javascript:;\' onclick=\'del_img(93517);\'>
									<img src=\'http://yapasphoto.ma/images/icones/ok.png\' alt=\'\'  /></a> 
									         
									<a href=\'#\' onclick=\'hideDialog()\' ><img src=\'http://yapasphoto.ma/images/icones/cancel.png\' alt=\'\' /></a>','error');">
	<img class="icon" alt="" src="http://yapasphoto.ma/images/icones/delete.png"/></a>
							<input type="checkbox" onclick="addsel(93517)" class="chk_alb" value="93517" name="id_photo" id="id_photo_93517"/>
		
	</div>
<div class="box" style="float: left; padding-left: 5px; padding-bottom: 5px;">
			<li>
		<a href="#">		
			<img style="margin-bottom: 3px;" alt="sous nuage" src="http://yapasphoto.ma/extranet/Upload/Clients/Thumb/admin@siway.fr/925495_avglogo.bmp" class="img_alb"/>
			<img class="preview" alt="sous nuage" src="http://yapasphoto.ma/extranet/Upload/Clients/admin@siway.fr/925495_avglogo.bmp"/>				
		</a>	
		</li>
																																																																																																																						<br/><a href="javascript:showDialog('Attention','Vous êtes sur le point de supprimer une photo<br /><br />
									<a href=\'javascript:;\' onclick=\'del_img(96711);\'>
									<img src=\'http://yapasphoto.ma/images/icones/ok.png\' alt=\'\'  /></a> 
									         
									<a href=\'#\' onclick=\'hideDialog()\' ><img src=\'http://yapasphoto.ma/images/icones/cancel.png\' alt=\'\' /></a>','error');">
	<img class="icon" alt="" src="http://yapasphoto.ma/images/icones/delete.png"/></a>
							<input type="checkbox" onclick="addsel(96711)" class="chk_alb" value="96711" name="id_photo" id="id_photo_96711"/>
		
	</div>
<div class="box" style="float: left; padding-left: 5px; padding-bottom: 5px;">
			<li>
		<a href="#">		
			<img style="margin-bottom: 3px;" alt="sous nuage" src="http://yapasphoto.ma/extranet/Upload/Clients/Thumb/admin@siway.fr/414391_cond068.gif" class="img_alb"/>
			<img class="preview" alt="sous nuage" src="http://yapasphoto.ma/extranet/Upload/Clients/admin@siway.fr/414391_cond068.gif"/>				
		</a>	
		</li>
																																																																																																																						<br/><a href="javascript:showDialog('Attention','Vous êtes sur le point de supprimer une photo<br /><br />
									<a href=\'javascript:;\' onclick=\'del_img(96713);\'>
									<img src=\'http://yapasphoto.ma/images/icones/ok.png\' alt=\'\'  /></a> 
									         
									<a href=\'#\' onclick=\'hideDialog()\' ><img src=\'http://yapasphoto.ma/images/icones/cancel.png\' alt=\'\' /></a>','error');">
	<img class="icon" alt="" src="http://yapasphoto.ma/images/icones/delete.png"/></a>
							<input type="checkbox" onclick="addsel(96713)" class="chk_alb" value="96713" name="id_photo" id="id_photo_96713"/>
		
	</div>
</ul>

LE CODE CSS


/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
	cursor: default;
	list-style: none;
}

.hoverbox a
{
	cursor: default;
	display:block;
	
}

.hoverbox a .preview
{
	display: none;
}

.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 30000;
	
}

.hoverbox img
{
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 100px;
	height: 75px;
}

.hoverbox li
{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	z-index:30;
}

.hoverbox .preview
{
	border-color: #000;
	width: 200px;
	height: 150px;
}
.hoverbox .icon
{	
	border: 0px;
	width: 10px;
	height: 10px;
}

Modifié par zbexworld (23 Nov 2009 - 18:06)

Mikachu

23 Nov 2009 à 12:32

Bonjour aussi...

zbexworld

23 Nov 2009 à 17:04

le site est déjà enligne ,juste que tu ne peux pas voir cette page avant de s'authentifier.j'ai créer un compte pour vous, une fois que vous etes connecté cliquer sur mon compte puis choisissez l'album alsa apartir du menu gauche.
n.b ouvrez le sous ie7 svp.
email: boyfunnn@yahoo.fr
mot de passe:123456
site:www.yapasphotos.ma
lien rapide: http://yapasphoto.ma/client/index.php

zbexworld

24 Nov 2009 à 13:01

mon poste a été vu 53 fois ,je n'ai eu aucune réponse a part celle de notre modérateur que je remercie

fvsch

24 Nov 2009 à 19:00

Bonsoir,

.hoverbox li {
	z-index:30;
}

N'aura aucun effet car comme indiqué dans la spécification CSS, dans toute bonne référence sur CSS ou article au sujet de z-index, la propriété z-index n'est prise en compte que si l'élément est positionné.

L'autre problème que tu risque d'avoir (ou que tu as déjà, vu le bug signalé), c'est que l'implémentation de z-index est partiellement buguée dans IE 6-7 (corrigé dans IE8). Donc même si tes LI étaient positionnés, ça ne t'aiderait pas forcément.

À tester:
- rajouter un position:relative aux LI;
- ne pas rajouter de position:relative mais supprimer le z-index des LI (normalement pas pris en compte, mais peut-être pris en compte par erreur par IE7...).

Si ça ne marche pas, il y a bien des solutions, mais ça demanderait de passer par JavaScript pour changer le z-index du LI survolé.

zbexworld

25 Nov 2009 à 11:46

salut Florent v,
j'ai fait ce que tu m'avais demandé de faire ,le problème est tjrs la.
tu pense pas que c'est a cause de la structure utilisée:une div apres l'élément ul qui contient l'élément li et la balise a .
je pensais que c'était un problème de float de l'elment li ,alors je l'ai changé a display:inline-block ca n'a riens changé

Sujet clos

Sémantique web et HTML

Bug de l'état du survole sous internet explorer 7