Backgroundcolor et bordure dotted

[arsenick]

Bonjour,

j'ai un soucis sous IE (sous les autres navigateur cela fonctionne) :

j'ai des cellules dont le bord est en pointillé, et je fait du rollover dessus pour changer la couleur de fond au passage de la souris.

Sous IE 6, on dirait que le bgcolor empiète sur le border ... enfin dans tout les cas cea fait un truc pas super esthétique.

(visible sur le site de mon profil - le menu par exemple)

Voici mon code :

<td nowrap style="border:thin dotted" onMouseOut="javascript:this.style.background='#000000'" onMouseOver="javascript:this.style.background='#E4E4E4'"><a href=".">Accueil</a></td>

si vous savez ce que je peux faire pour ne pas avoir cet effet plus que désagréable, je suis preneur :wink:

 

[blman]

as-tu essayer avec les pseudo classes a:link, a:hover, a:visited et a:active en CSS (plutôt que de mettre du javascript) ?
Parce que plutôt que de mettre les bords sur des colonnes de tableaux, tu les met sur tes liens et là, je pense que tu n'aura plus le problème.

 

[arsenick]

mais avec ta solution l'effet ne serra que sur le lien et pas sur la cellule ...

 

[blman]

C'est pas grave, ce sera invisible pour l'internaute. Et puis structurellement parlant, il est normal que l'effet soit sur le lien et pas sur la cellule. Pour que ton lien prenne toute la cellule tu peux utiliser display: block;

voici le code que j'utiliserais :

<td><a href="." class="navbar">Accueil</a></td>

Dans CSS :

a:link.navbar {
display:block;
padding:5px 5px 5px 5px;
border-style:dotted;
border-width:1px;
border-color#000000;
}
a:visited.navbar {
display:block;
padding:5px 5px 5px 5px;
border-style:dotted;
border-width:1px;
border-color:#000000;
}
a:hover.navbar{
display:block;
padding:5px 5px 5px 5px;
border-style:dotted;
border-width:1px;
border-color:#E4E4E4;
}
a:active.navbar {
display:block;
padding:5px 5px 5px 5px;
border-style:dotted;
border-width:1px;
border-color:#000000;
}

J'ai pas fait le test mais ça devait fonctioner si j'ai pas fait de faute de frappe

 

[blman]

Tu pourrais encore être plus structurel en utilisant des listes ul en affichant les éléments en inline à la place de ton tableau. Ca te donnerait aussi le même effet visuel, mais tes pages perdrons du poids et ton code gagnerais en structure.

 

[e-kiwi]

mwé, et regrouper :

a:link.navbar, a:visited.navbar, a:active.navbar
{

}

ca te semble pas economiser 75% de code ?

 

[blman]

ouaich, bien vu, j'ais fait ça en speed (au passage, très chouette la refonte de ton site e-kiwi)

 

[arsenick]

ok je vais regarder tout ça ... merci pour vos conseils éclairés ! :idea:

 

[arsenick]

Nickel : le pb d'IE est résolut avec cette méthode.
Par contre, j'ai la facheuse impression que firefox n'aime pas le dotted dans la css ... Il me met un filet continu ...

 

[mamat-]

De la meme maniere remplace

	border-style:dotted;
	border-width:1px;
	border-color:#666666;

par

border: 1px dotted #666

;o)
Ha oui au fait ils sont bien en pointillés tes box... Simplement pas de la meme taille que ceux des hr du corps...

 

[blman]

ou tu peux essayer "dashed" à la place de "dotted". Je sais pas si ça va changer ton problème dans Firefox mais tu peux toujours essayer. C'est bizarre quand même que tu es des problèmes dans Firefox, il interprète très bien tous les standards...

 

[mamat-]

En fait ce ne sont pas des problemes ! Ca vient du fait que les pointillés sont trés petit ! essaye simplement de mettre toutes les bordures pointillés en 2px...

 

[arsenick]

oui, ils sont bien en pointillés ... c'est mon ordi qui affiche n'importe quoi ...