Sujet Précédent Sujet Suivant

Pb de rollover avec tableau

Résolu/Fermé
jakkihm Messages postés 134 Date d'inscription vendredi 13 octobre 2006 Statut Membre Dernière intervention 17 mai 2016 - 5 juin 2007 à 16:52
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 10 juin 2007 à 18:39
Bonjour,

J'ai réalisé un effet de rollover utilisant un tableau, cela fonctionne sous FF mais non sous IE.
Sous IE le changement de couleur du fond de la cellule (td) ne s'effectue pas.
Je ne parviens pas à situer mon erreur.

Code HTML: 
<table id="indexMenu">
	<tr>
		<td><a href="">item 1</a></td>
	</tr>
	<tr>
		<td><a href="">item 2</a></td>
	</tr>
</table>


Code CSS: 
table#indexMenu {
	position:absolute;
	top: 200px;
	left: 0;
	width: 100%;
	text-align: center;
	font-family: arial;
	font-size: 12px;
	color: #faeaf4;
}

table#indexMenu td {
	padding: 3px;
}

table#indexMenu a:link {
	text-decoration: none;	
	color: #faeaf4;
}

table#indexMenu a:visited {
	text-decoration: none;
	color: #faeaf4;
}

table#indexMenu a:hover {
	text-decoration: none;
	color: #de0500;
}

table#indexMenu td:hover {
	background-color: #faeaf4;
	
}



Merci de votre aide !

4 réponses

Réponse 1 / 4
king
5 juin 2007 à 18:06
teste en remplaçant avec ça:

table#indexMenu a:hover {
text-decoration: none;
color: #de0500;
background-color: #faeaf4;
width:100%;
}

Ca devrait plaire à IE :-)
0
Réponse 2 / 4
jakkihm
6 juin 2007 à 00:28
Merci king, mais malheureusement aucun changement : la couleur de fond de la cellule ne change pas.
0
king
6 juin 2007 à 12:04
Ta purger ton cache, car j'ai quand même essayé pour ne pas dire n'importe quoi et c'est 100% pareil sur IE6 et Firefox
0
king > king
6 juin 2007 à 12:32
Maintenant que j'y repense, tu es sûrement passé 1 km à côté du lien....

Pour IE, ça ne fonctionne que si ta souris passe sur le lien (ce qui du reste est assez logique), il tient compte du texte et non du vide.
Ce pourquoi, j'ai remis le tout dans "a:hover"
Pour la même raison, faut aussi remettre "width:100%;" à ce même niveau car dans le cas contraire, il fera fonctionner le background sur la largeur du texte uniquement.

Pour faire fonctionner des cellules vides sous IE (ce qui n'a strictement aucun intérêt), il faut passer via un javascript ;-)
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921 > king
6 juin 2007 à 13:46
salut,

cf 3
0
king > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
6 juin 2007 à 19:31
ou CF1 :-)

déjà sorti
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921 > king
7 juin 2007 à 00:14
{width:100%;} sur un élément en ligne (<a>). ça doit pas faire grand chose…
-;o)
0
Réponse 3 / 4
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
6 juin 2007 à 00:51
salut,

une solution possible : coder le comportement sur le <a> plutôt que sur le <td>.
essaie ça tel quel : 
<html>
	<head>
		<style type="text/css">
body{
	background-color:#000;
}
table#indexMenu {
	position:absolute;
	top: 200px;
	left: 0;
	width: 100%;
	text-align: center;
	font-family: arial;
	font-size: 12px;
	color: #faeaf4;
}
table#indexMenu tr td {
	padding:0;
}
table#indexMenu tr td a{
	padding: 3px;
	display:block;
	width:100%;
}
table#indexMenu tr td a:link {
	text-decoration: none;	
	color: #faeaf4;
}
table#indexMenu tr td a:visited {
	text-decoration: none;
	color: #faeaf4;
}
table#indexMenu tr td a:hover {
	text-decoration: none;
	color: #de0500;
	background-color: #faeaf4;
}
		</style>
	</head>
	<body>
		<table id="indexMenu">
			<tr>
				<td><a href="">item 1</a></td>
			</tr>
			<tr>
				<td><a href="">item 2</a></td>
			</tr>
		</table>
	</body>
</html>

à l'heure qu'il est je n'ai pas le courage de pousser les investigations plus loin et je n'ai plus les idées assez claires…

bonne nuit !
0
Réponse 4 / 4
Utilisateur anonyme
6 juin 2007 à 11:19
apres cela depent quel version de IE tu utilise :

IE6 ne prend pas en compte le changement de couleur sur le fond d'une cellule avec les proprieter hover

par contre normalement avec IE7 ça marche...(je déjà fais :-) )
0