[résolu] Souligment d'un lien h2 sous safari

Bonjour,

Pour un site, j'ai créée un lien sur une balise h2 qui se présente sous la forme suivante :

<a href="#">
  <h2>Titre</h2>
</a>

Mon problème est le suivant : tous les navigateurs affichent ma balise h2 normalement sauf safari. Safari souligne le lien alors que j'ai spécifié dans mon css un text-decoration:none.

a:link h2{
  font-size: 1.0em;
  color: #53646F;
  font-weight: normal;
  line-height: 1.5em;
  margin:0;
  padding-left:25px;
  text-decoration: none;
  background: url("../img/arrow_grey.png") center left no-repeat;
}
a:hover h2{
  color: #CECF74;
  background: url("../img/arrow_black.png") center left no-repeat;
}

pourquoi safari affiche donc un soulignement à ma balise h2?

Merci
Modifié par nforum (08 Nov 2009 - 23:50)

Bonjour,

Ton code HTML n'est pas correct. L'article "Balises bloc et en-line : les exceptions" devrait t'intéresser.

Salut,

Merci pour le tuyau. Mon problème maintenant est si je place des bloc-inline dans un élément bloc, et bien mon h2 est souligné sur tous les navigateurs. C'est certainement plus logique, mais ça veux dire que qqch n'est pas clair dans mon css. Car si j'écris

h2 a:link{
  text-decoration:none;
}

le titre/lien h2 reste souligné! J'ai essayé des choses en vain du type h2+a:link, mais rien à faire.

Bonjour,

Si le lien a déjà été visté, le :link peut éventuellement poser problème.
Si cela ne fonctionne pas, la question a se poser est de savoir si le style pour cet enchaînement de balise a déjà été défini. Si oui, il faut alors augmenter le poids de l'instruction.

Merci pour les précisions corinne,

dans mon css, j'ai d'abord défini "a" (a:link, a:hover) et "h2". Que veux-tu dire par augmenter le poids de l'instruction?
Mon but est que les balises "a" contenu dans une balise "h2" (donc <h2><a href="#"></h2>) s'affichent comme le h2 normalement défini dans mes css, avec un rollover.

L'ordre de déclaration pour les différents aspects d'un lien doit être le suivant : link, visited, hover, active.
Petit moyen mnémotechnique pour s'en souvenir : LoVe HAte.
Pour éviter tout problème, je définis les 4.

Concernant le poids des instructions, je te conseille la lecture de cet article sur la priorité des sélecteurs.

Merci Corinne,

Néanmoins, Safari continu à souligner les h2 sous forme de lien! bizarre!!!
Sinon, j'ai du coup un autre souci. Mes h2 ont une petite flèche devant le titre. Lorsque le h2 contient un lien "a", j'aimerais que cette flèche change de couleur en hover. En suivant tes conseils, je me rends compte que les h2 affichent 2 flèches l'une à côté de l'autre. En bref, une première flèche définit dans h2 et une deuxième flèche défini dans "h2 a:link".

As-tu une idée pour quelle raison!!! c'est vraiment bizarre!

Pour le détail, voici mes css :

h2{
	font-size: 1.0em;
  color: #53646F;
	font-weight: normal;
  line-height: 1.5em;
	margin:0;
	padding-left:25px;
	background: url("../img/arrow_grey.png") center left no-repeat;
	text-decoration:none;
}
h2 a:link{
  font-size: 1.0em;
  color: #53646F;
  font-weight: normal;
  line-height: 1.5em;
  margin:0;
  padding-left:25px;
	text-decoration: none;
  background: url("../img/arrow_grey.png") center left no-repeat;
}
h2 a:visited{
  font-size: 1.0em;
  color: #53646F;
  font-weight: normal;
  line-height: 1.5em;
  margin:0;
  padding-left:25px;
  text-decoration: none;
  background: url("../img/arrow_grey.png") center left no-repeat;
}
h2 a:hover{
  color: #CECF74;
  background: url("../img/arrow_black.png") center left no-repeat;
}
h2 a:active{
  color: #CECF74;
  background: url("../img/arrow_black.png") center left no-repeat;
}

Modifié par nforum (06 Nov 2009 - 12:43)

la seule astuce que j'ai trouvé, est de placer un margin-left à -25px sur mes h2 a:link. Ainsi, ma flèche superpose la flèche "d'origine" du h2! Mais cela me semble un peu du bricolage.

Bon, en esparant ne spammer personne , je résume la situation :

La raison pour laquelle safari soulignait les h2 avec lien a été réglé. Il s'agit bien de l'autre des balises html, soit

<h2><a href="#">lien</a></h2>

, et de la spécification complète des liens grâce au merveilleux mémo technique LoVe HAte, c-a-d :

h2{}
h2 a:link{}
h2 a:visited{}
h2 a:hover{}
h2 a:active{}

Le dernier souci concernait l'affichage de flèche devant les h2. Cela a été réglé grâce à un margin-left:-25px qui permet de superposé la flèche du h2 a:link sur celle du h2.

pfouf