18041 sujets

Questions générales et questions de débutants

[Résolu] Img float left + relative text

Bonjour,

J'ai un problème vraiment étrange et qui ne m'était jamais arrivé avec des float. Une image vaut mieux qu'un long discours donc (les aperçus sont mauvais, cliquer sur l'image pour la voir mieux) :
Capture Firefox
upload/18054-CaptureFir.png
Capture Opera
upload/18054-CaptureOpe.png

Pourquoi ce décalage du texte à droite sous Firefox ?

Voilà le code coupable :

<!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">
  <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /><title>Fichier</title>
  </head>
  <body>
    <div style="font-family: sans-serif;">
      <span style="font-family: sans-serif; font-size: 0.8em;">adresse@mail.fr</span>
      <div style="margin-top: 10px">
        <img style="float: left; position: relative; left: 0px; top: 0.1em;" alt="Logo" title="Logo" src="LogoMoche.png"/>
        <div style="padding-left: 5px; position: relative; left: 70px; border-left: solid 5px #d3d62f; color: #0a2c83; font-size: 0.8em">
          Lorem ipsum dolor sit amet<br />
          consectetuer adipiscing elit<br />
          Curabitur hendrerit lacinia odio<br />
          Ut pede. In vitae nibh
        </div>
      </div>
    </div>
  </body>
</html>


Merci d'avance.
Modifié par PomCompot (01 Oct 2008 - 14:10)
Bonjour,

Abus de positionnement relatif, pour commencer. Le positionnement relatif me semble ici à la fois inutile et casse-gueule. Des marges, c'est bien aussi.
Ok, j'ai viré le positionnement relatif et utilisé une marge de 70px en sus et place et ça marche. Mais, la question est surtout du pourquoi. Pourquoi Firefox décale dans le div vers la droite de 70px alors qu'il a déjà décalé le div de 70 px ? Je suis d'un naturel à vouloir comprendre, donc pour la solution déjà merci, pour l'explication
il me l'a faut ! Smiley biggrin .

<!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">
  <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /><title>Fichier</title>
  </head>
  <body>
    <div style="font-family: sans-serif;">
      <span style="font-family: sans-serif; font-size: 0.8em;">adresse@mail.fr</span>
      <div style="margin-top: 10px">
        <img style="float: left; left: 0px; top: 0.1em;" alt="Logo" title="Logo" src="LogoMoche.png"/>
        <div style="padding-left: 5px; margin-left: 70px; border-left: solid 5px #d3d62f; color: #0a2c83; font-size: 0.8em">
          Lorem ipsum dolor sit amet<br />
          consectetuer adipiscing elit<br />
          Curabitur hendrerit lacinia odio<br />
          Ut pede. In vitae nibh
        </div>
      </div>
    </div>
  </body>
</html>
Bon alors, ce n'est qu'une supposition mais je dirais que ça se passe comme ça:

1. Firefox applique d'abord l'effet du flottant, qui décale le texte (réviser le positionnement flottant si ça n'est pas clair). Puis il décale le conteneur du texte de 70px vers la droite (positionnement relatif). La combinaison des deux explique l'écart observé.

2. Opera applique d'abord le décalage du positionnement relatif. Le flottant ne touchant alors pas le conteneur du texte, il n'en repousse donc pas le contenu.

Bref, la différence serait due à une légère différence dans les implémentations entre les deux navigateurs. Je ne saurais pas dire laquelle est correcte. Je pense que la spécification CSS ne précise pas le comportement à adopter dans ce cas de figure.
Il semble bien que ce soit le positionnement relatif qui soit en cause et une interprétation différente entre Firefox et Opera. Là où Opera considère que le point de référence à la position relative est le coin supérieur gauche du div parent, Firefox considère que c'est le point de positionnement par défaut de l'élément (point déjà décalé de 70px par le float) d'où un second décalage de 70px.

Merci en tout cas pour ces explications.
PomCompot a écrit :
Il semble bien que ce soit le positionnement relatif qui soit en cause et une interprétation différente entre Firefox et Opera. Là où Opera considère que le point de référence à la position relative est le coin supérieur gauche du div parent, Firefox considère que c'est le point de positionnement par défaut de l'élément (point déjà décalé de 70px par le float) d'où un second décalage de 70px.

Non. Dans tous les cas, le positionnement relatif combiné aux propriétés top, right, bottom ou left permet de décaler un élément par rapport à sa position normale (sans positionnement relatif). Il ne s'agit donc pas d'un point de référence différent entre les deux navigateurs.

C'est la combinaison action d'un float adjacent + positionnement relatif qui pose problème, car elle est très peu commune et peut être gérée de manières différentes par les navigateurs (en l'absence de précisions sur ce cas particulier dans les spécifications, ou de test cases officiels portant sur ce point).
Modifié par Florent V. (01 Oct 2008 - 14:31)
Sujet clos
Aller à