[résolu] Border qui fait 2 px au lieu de 1 :S

Bonjour

J'utilise le code suivant pour mettre des petits traits sous mes liens affichés sous forme de listes :

.vnav ul li a:link, .vnav ul li a:visited, .vnav ul li a:active
{
	text-decoration: none;
	background-color: #284E5D;
	color: #A4B9C8;
}
.vnav ul li a:hover
{
	text-decoration: none;
	color: #97B3CA;
	border-bottom: solid 1px #97B3CA;
}

Le problème c'est que ça me fait des lignes de 2 pixels au lieu d'1 pixel comme défini dans le code. Les lignes de 2 pixels sont actuellement visibles sur la Boite à rêves (encore en développement). Et quand j'augmente à 2px ça m'en fait 4 .

Pourquoi cela me fait-il ça à votre avis ? Comment y remédier ?
Modifié par Yazerty (28 Dec 2005 - 15:47)

Bonjour,
tu sembles "superposer" ou accumuler plusieurs éléments pour une même chose, dans ta css et ton html. Exemple : H1 que tu renforces par "strong" ! alors que tu peux définir h1 en css... Et ton problème de ligne est du même ordre : en fait, on ne perçoit pas du tout la ligne dont tu parles qui devrait apparaître lors du survol (hover). Ta ligne "persistante" de 2 px est là :

.vnav ul li, .vnav ul li a
{
	display: block;
	border-bottom: solid 1px #A4B9C8;
}

Supprime "border-bottom", et tu verras l'autre ligne... définie par le bout de css que tu nous a donné... Et nous pourrons y voir plus clair alors dans ce que tu souhaites...

Effectivement.

.vnav ul li, .vnav ul li a
{
	display: block;
}
.vnav ul li a:link, .vnav ul li a:visited, .vnav ul li a:active
{
	text-decoration: none;
	color: #A4B9C8;
	border-bottom: solid 1px #A4B9C8;
}
.vnav ul li a:hover
{
	text-decoration: none;
	color: #97B3CA;
	border-bottom: solid 1px #97B3CA;
}

a tendance à marcher plus comme je veux , merci !

ps : pour le strong c'est corrigé. J'avais fait la chose un peu rapidement sans rentrer dans le css. Cette partie étant vouée à être modifiée dans peu de temps...
Modifié par Yazerty (28 Dec 2005 - 15:47)