Page 1 sur 1

Elément block dans élément inline

Publié : 19 déc. 2008, 14:53
par drx-ez
Depuis Firefox 3 (sur Mac en tout cas), lorsqu'on met un élément de type block (div) dans un élément de type inline (a), on a un comportement bizarre : un point apparait près du texte quand on clique dessus.

Vous allez me dire (et vous aurez raison) : de toute façon, on ne doit pas mettre de block dans des inline !

Soit. Mais quand même, c'est bizarre. Ca ne le faisait pas sur FF2. Ca ne le fait pas sur IE ou Safari.

De plus, je galère à cause de ce « point » car l'html ne peut être changé. Il est assez propre et contient un menu avec un <a><span>blabla</span></a>. Je m'occupe des feuilles CSS et sur un des thèmes, j'ai « réglé » un problème en déclarant le span comme étant un élément de type block (display: block). Tout marchait jusqu'à FF3. Et sans cette bidouille, je n'arrive à rien.

Moi je veux bien que FF refuse les abbérations de ce style, mais là il les accepte en rajoutant un point étrange... Ce n'est peut-être pas grand chose à « corriger » dans le code de FF pour que ce point n'apparaisse pas.

ECM :

Code : Tout sélectionner

<?xml version="1.0" encoding="utf-8"?>
<!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="en-US" lang="en-US">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Test XHTML et CSS</title>
	</head>
	<body>
		<div>
			<a href="#">
				<div>Home</div>
			</a>
		</div>
	</body>
</html>
Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; fr; rv:1.9.0.5) Gecko/2008120121 Firefox/3.0.5

Publié : 19 déc. 2008, 15:17
par calimo
Étant donné que c'est invalide, le navigateur "répare" le problème un peu comme il peut, et il n'est pas impossible que les développeurs aient trouvé que, dans certains cas, cette façon de faire est plus logique, ou bien peut-être fonctionne mieux...

Mais en fait, la vraie question est : pourquoi mets-tu un div dans ton a ? Je suis prêt à parier que tu n'en as en fait pas besoin et que tu peux faire ce que tu veux en CSS directement sur le a !


PS : c'est du développement web, non ? :wink:

Publié : 19 déc. 2008, 15:29
par Pastisman
BONJOUR !

Alors, en farfouillant un peu j'ai trouvé ça :

Code : Tout sélectionner

*|*:-moz-any-link:focus {
  /* Don't specify the outline-color, we should always use initial value. */
  outline: 1px dotted;
}
dans le code de FF, donc en mettant

Code : Tout sélectionner

*|*:-moz-any-link:focus {
  /* Don't specify the outline-color, we should always use initial value. */
  outline: 0px !important;
}
dans mon usercontent, le "point" disparait. si tu le mets dans le css de ta page, ça devrait le faire aussi non ?


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.2; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

Publié : 19 déc. 2008, 15:30
par dr-ez
Merci pour cette réponse rapide.

Comme je l'ai dit, techniquement, je n'ai pas mis de div dans un a mais il y a un span dans un a. Et à ce span, j'ai appliqué la règle css display: block.

Quant au pourquoi, ce a correspond à un onglet de menu avec bords arrondis. Le a me sert à faire les arrondis de gauche, le span à faire ceux de droite. Et je n'y arrive pas autrement.

C'est sûr que le pb vient de moi. Mais le comportement de FF étant presque aussi étrange que de vouloir un block dans un inline (rajouter un point ou deux, sans raison, sur le texte, c'est plutôt louche) je me demandais si ça ne cachait rien d'autre (genre un bug) et si c'était facilement résolvable. Maintenant, je peux comprendre qu'aucun développeur n'a envi de passer plus de 10s à « corriger » un comportement étrange de FF dû à un code invalide.

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; fr; rv:1.9.0.5) Gecko/2008120121 Firefox/3.0.5

Publié : 19 déc. 2008, 15:31
par Pastisman
Bah moi j'ai passé bien 10mn !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.2; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

Publié : 19 déc. 2008, 15:39
par dr-ez
Nan ? Merci :)

Effectivement ça marche nickel. J'avais essayé de mettre des :active {outline: 0} un peu partout, etc. et ça ne marchait pas tout à fait. Là c'est impeccable. Au moins je peux tout laisser sans avoir à reprendre des tonnes de lignes CSS. Encore merci pour tout :)

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; fr; rv:1.9.0.5) Gecko/2008120121 Firefox/3.0.5