[résolu] Positionnement absolu par rapport à un élément inline

Bonsoir.

Voici mon problème. J'aimerais positionner un élément (<dfn> en l'occurence) en absolu par rapport à un élément inline (<em> dans ce cas).

Cela marche sous Firefox, sous IE7 aussi, mais pas sous IE6. Quelqu'un peut-il m'aider?

Voici mon code:

<p>Du texte, du texte, du texte, du texte,<em>mot important<dfn>sa definition</dfn></em> du texte, du texte.</p>

et en css:

em	{ background-color:#FFFF00; position: relative; }
dfn	{ border:1px solid #000; display:block;
	position:absolute; top:20px; right:0; }

Pour info, sous IE6, le cadre dfn apparaît complètement décalé à droite. (remplacez right:0; par right:500px; pour le voir apparaître.)

Si on le positionne depuis la gauche, ça fonctionne partout. Ca a donc l'air de venir de la longueur que IE6 ne connaît pas. Mais comment la lui indiquer?
Merci pour votre aide.
Modifié par <nicolas> (15 Dec 2006 - 10:23)

Bonsoir et bienvenu sur le forum ...

Pour info, un élément ne peut être postionné que si son conteneur est lui-même positionné.
Petit extrait :

a écrit :
Lorsqu'il est en position absolue ou fixe, le bloc est dit "positionné". Il est retiré du "flux" du code html : son positionnement sera le même quelle que soit l'emplacement de la balise dans le code du conteneur parent, quel que soit sa fraternité.
Le bloc est placé par rapport à son parent s'il est lui-même positionné, ou alors par rapport au dernier Ancètre positionné (si aucun Ancètre n'est positionné, il se réfère à la page entière, balise html).

En toute logique il te faudrait donc positionner ton élément inline en lui affectant une class et une position : relative.

Voici l'article si tu veux le lire
- Comprendre le positionnement des éléments en CSS
Modifié par Cygnus (15 Dec 2006 - 00:07)

Merci mais j'ai déjà donné une position relative à mon élément <em>. Le problème vient vraiment de IE6 qui pète les plombs parce qu'il ne connaît pas la longueur de l'élément <em>. Mais il doit bien y avoir un hack non?

Bonjour et bienvenue,

Il faudrait doter le conteneur (ici em) de layout, en ajoutant par exemple la déclaration zoom:1 (non pris en compte par IE 5.0)

Pour plus d'infos, voir cet article (ou mieux la version originale qui est actualisée), il y a justement une partie à ce sujet.
Modifié par Alan (15 Dec 2006 - 08:50)

Entre-temps j'ai trouvé une solution en donnant un display: inline-block; à l'élément <em>.

Ca semble donc bien être un problème de layout.
Modifié par <nicolas> (15 Dec 2006 - 09:42)