28220 sujets

CSS et mise en forme, CSS3

[Résolu] Héritage du souligné sous Firefox

Salut,

Sous Firefox, dans cet exemple l'héritage fonctionne correctement sur la couleur mais pas sur le souligné.
Je cherche à comprendre pourquoi.

Merci pour vos avis. Smiley smile
Modifié par 20cent (16 Feb 2007 - 17:46)
Salut.

Quel est le problème ? Si tu veux que le soulignement du lien soit rouge aussi, il faut supprimer 
text-decoration: none;
Ce n'est pas un souci d'héritage, la propriété s'hérite correctement, mais le text-decoration:none du <a> ne "supprime" pas le soulignement au niveau du li qui reste valable. Tu applique un soulignement au li, donc tout son contenu se retrouve souligné.

Si tu applique un text-decoration:none au <a> ensuite, ça permet de voir le soulignement du li qui reste "en dessous".

Tu peux faire le test en enlevant le text-decoration:none du <a>, grâce à l'héritage tu aura un soulignement rouge mais qui en fait se superpose au soulignement vert du li.

Je sais pas si je suis très clair Smiley smile
@ Thomas D.

Dans la partie css tu verras que je souhaite :

- souligner les textes dans les éléments de ma liste
- sauf lorsqu'un élément contient un lien

Les couleurs ne sont là que pour montrer que l'héritage fonctionne.

Sous IE, le comportement est celui attendu. Sous FF, ce n'est pas la cas, et j'aimerais comprendre pourquoi.

Bug du navigateur ou incompréhension de ma part ?
Modifié par 20cent (16 Feb 2007 - 17:31)
@ MrPatate

Yes ! Ça semble être ça. J'ai modifié mon exemple pour mieux mettre en évidence ton explication.

Étonnant quand même, on peut donc avoir autant de soulignements que de conteneurs à un même texte.

Merci !
Modifié par 20cent (16 Feb 2007 - 17:47)
perso le comportement de firefox (et safari, j'ai testé) me parait logique

20cent a écrit :

- souligner les textes dans les éléments de ma liste
- sauf lorsqu'un élément contient un lien


il faudra alors faire quelque chose comme ça (pas testé) :


li *{ text-decoration:underline;}
li a{ text-decoration:none;}
Non, ça ne marche pas.

Je contourne le problème par ce code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Test héritage</title>
		<style type="text/css">
			li span
			{
				text-decoration:underline
			}
			li a
			{
				text-decoration:none
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<a href="#">test</a>
			</li>
			<li>
				<span>test</span>
			</li>

		</ul>
	</body>
</html>

Modifié par 20cent (16 Feb 2007 - 17:53)
Sujet clos
Aller à