Pb de rollover avec tableau
Résolu
jakkihm
Messages postés
134
Date d'inscription
Statut
Membre
Dernière intervention
-
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention -
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention -
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:
Code CSS:
Merci de votre aide !
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 !
A voir également:
- Pb de rollover avec tableau
- Tableau word - Guide
- Tableau ascii - Guide
- Trier un tableau excel - Guide
- Tableau croisé dynamique - Guide
- Imprimer tableau excel sur une page - Guide
4 réponses
teste en remplaçant avec ça:
table#indexMenu a:hover {
text-decoration: none;
color: #de0500;
background-color: #faeaf4;
width:100%;
}
Ca devrait plaire à IE :-)
table#indexMenu a:hover {
text-decoration: none;
color: #de0500;
background-color: #faeaf4;
width:100%;
}
Ca devrait plaire à IE :-)
Merci king, mais malheureusement aucun changement : la couleur de fond de la cellule ne change pas.
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 ;-)
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 ;-)
salut,
une solution possible : coder le comportement sur le <a> plutôt que sur le <td>.
essaie ça tel quel :
à 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 !
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 !
