[Résolu] Hover sur lien en 2 lignes, le bg passe devant la 1ère

Bonjour à tous, j'ai un petit souci d'ordre esthétique.

J'ai appliqué le style suivant aux liens contenus dans les balises h3 (les titres des billets) :

h3 {
  margin: 0px 0px 0px 0px;
	
  font-size: 2.4em;
  line-height: 0.85em;
  font-weight: bold;
  text-transform: uppercase;
}
h3 a {
  color: #000000;
  font-weight: bold;
}
    h3 a:hover {
      color: #ffffff;
		
      background: #000000;
    }

Le problème se produit lorsque l'on survole ces liens (indépendamment du navigateur), le background de la seconde ligne passe sur le texte de la première, j'ai tenté de régler ce problème en réduisant la hauteur de la ligne mais ça n'a rien changé

Ca se passe ici : http://andreloconte.com/blog/

Auriez vous une idée ?
Modifié par Akhilleus (16 Jun 2008 - 01:17)

Salut,

Si tu supprimes ton line-height sous FF, ca a l'air ok

Bonsoir,
c'est normal tu as une line-height inférieur à 1em.
La boîte en-ligne du texte chevauche donc logiquement la boîte en-ligne supérieure.
Pour éviter ce genre de désagrément, tu dois convertir ton lien en boîte de bloc via un float:left (pour que le bloc s'adapte à son contenu)
et ajouter un clear:left sur l'élément suivant.

Bonjour et merci pour vos réponses.

@ghost : si je supprime le line-height je perds la mise en forme que je souhaitais appliquer aux titres de mes billets donc ce n'est pas la solution

@Hermann : j'ai testé ta méthode qui fonctionne très bien sous FF et sous Safari mais elle met le design littéralement en pièces sous IE6 (je n'ai pas encore testé IE7) : malgré le clear:both ou left, le design n'est plus centré

[s]http://andreloconte.com/blog/ (rendu normal)[/s]
[s]http://andreloconte.com/blog/?design=global-test (test du rendu avec float)[/s]
Modifié par Akhilleus (16 Jun 2008 - 15:42)

petit up

bonjour,

retest le float et active le layout pour le h3 dans IE:

h3 {
	margin: 0px 0px 0px 0px;
	height:1%; /* IE */
	font-size: 2.4em;
	line-height: 0.85em;
	font-weight: bold;
	text-transform: uppercase;
}
	h3 a {
		color: #000000;
		font-weight: bold;
	}
	h3 a:hover {
		color: #ffffff;
		background: #000000;
	}	

Cela passe t-il mieux ?

GC

Ça fonctionne impec, un grand merci !

Pourrais tu me donner des explications (ou un lien vers un article) sur l'origine du bug car je ne parviens pas à en déterminer la nature ?
D'avance merci et merci encore pour la solution
Modifié par Akhilleus (16 Jun 2008 - 01:11)

C'est un bug de haslayout (concept ayant maintenant disparu avec IE8) > lire au moins le début de cet article
Modifié par Hermann (16 Jun 2008 - 13:21)

Merci Hermann pour le lien

Je viens de constater un autre problème, nettement moins important mais sous FF, lorsque je clique sur le titre d'un billet, la zone de sélection du lien est étendue de ~5px au dessus et en dessous. Plus que d'un point de vue esthétique, cela est gênant car la ligne inférieure du cadre en pointillés obstrue la visibilité de mon paragraphe d'information (date, tags, ..).

Une fois de plus, malgré mes tentatives (reset padding/margin/line-height) de solution, je n'avance pas

bonjour,

Pour effacer le pourtour qui apparait au focus (sert a visualiser que l'on a cliqué sur ce lien) il suffit de le mettre a zero par defaut (reset):

h3 a {outline:0;}

GC

Un tout tout grand merci