Problème de positionnement d'un élément graphique

[Nicolas]

Bonjour,

J'ai des résultats différents sur le positionnement d'un élément d'une balise DIV :

sur FIREFOX (0.9.1) l'affichage de l'élément apparait est plus bas que sur IE (6)

Pour le positionnement j'utilise un padding-top :

<div style="padding-top:17px;padding-left:353px"><img src="...."></div>

Merci d'avance

AJOUT:Les résultats sont les mêmes sur FIREFOX, OPERA et NETSCAPE.

[MissMonde]

Bonjour,

je mettrais des marges à l'image elle-même, plutôt que des padding au contenant.

[Nicolas]

Bonjour missmonde,

C'est un problème d'espacement à l'interieur du cadre (l'image à l'interieur du div touche le cadre sous FIREFOX alors qu'il est à quelques pixels du bord sous IE).

Donc je pense qu'il doit avoir une propriété non définie qui doit adopter une valeur par défaut différente suivant le browser.

[MissMonde]

IE gère différemment les boites quand on met des padding et des border, c'est pour ça qu'il est préférable de mettre des marges à l'élément image plutôt que des padding à son contenant.

Mais bon, je suis peut-être à côté de la plaque.

[Nicolas]

Je crois que c'est un problème de centrage vertical. Malgrès le vertical-align: top; sous IE l'image est centrée verticalement alors qu'elle est bien collée au cadre sous FIREFOX.

[LaurentDenis]

Impossible de te répondre sans un code plus complet. peux-tu donner une url ?

[Nicolas]

J'ai trouvé la solution.

IE ajoute un espace vertical avec ce code

<div style="position: absolute; left: 600px; top:24px;">

<img src="xxxxxx.gif">

</div>

Par contre tout à la suite cela fonctionne :

<div style="position: absolute; left: 600px; top:24px;"> <img src="xxxxxx.gif"></div>

Donc sur ce coup IE est plus strict que les autres navigateurs.

Comme quoi des fois faut aller chercher trop loin !!

[Nicolas]

Même pb avec une balise <td>

<td><img src="xxx.gif"></td>

OK

<td>

<img src="xxx.gif">

</td>

PB sous IE

Merci à ceux qui ont essayé de m'aider.

[pierredureau]

"Donc sur ce coup IE est plus strict que les autres navigateurs."

Comment ça, 'plus strict' ?

[Nicolas]

Comment ça, 'plus strict' ?

Il est moins tolérant!!!

Je me demande même si c'est pas une erreur d'interprétation ??

J'aimerai savoir ce qu'en pensent les pros du CSS.

[LaurentDenis]

C'est une particularité du mode de rendu CSS "Standard" (celui du W3C) que l'on ne retrouve pas dans le mode de rendu "Quirks" (compatible Microsoft) ou le mode "Almost Standard" (propre à Mozilla).

[edit]Mode de rendu CSS en bref :

- Le mode de rendu CSS est la manière dont chaque navigateur applique les CSS. Microsoft ayant créé son propre mode de rendu non standard pour IE5 Windows, tous les navigateurs plus récents ont dû implémenter ce mode Microsoft en plus du mode standard qu'ils utilisaient déjà

- Ils se sont également dotés d'un mécanisme appelé DocType Switching permettant aux concepteurs de pages Web d'indiquer quel mode adopter pour traiter leurs pages).

- Ce système de double de mode de rendu et de DocType Switching fonctionne également dans IE6 Windows et IE5 Mac. [/edit]

En mode de rendu strict, une image étant par défaut un élément en-ligne, elle est alignée verticalement exactement comme une lettre sans jambage (la lettre a, par exemple), c'est à dire au-dessus de la ligne de base du texte.

Or, sous la ligne de base du texte, il reste un espace inférieur pour les jambages des lettres comme le p. C'est cet espace que tu vois apparaître.

Ta solution de placer tout le code sur une seule ligne n'en est pas vraiment une, car elle repose sur un bug d'IE et ne fonctionne pas par exemple dans Opera.

Pour empêcher cet espace d'apparaître, il y a trois solutions possibles :

- Faire passer le navigateur en mode "Quirks" en utilisant le DocType switching (choix d'un doctype qui force ce mode de rendu).

- Rester en mode "Standard" et faire traiter l'image comme un élément bloc au lieu d'un élément en ligne :

img {display: block;}

- Ou utiliser les règles d'alignement du texte par rapport à la ligne de base :

img {vertical-align: bottom;}

Voir Images, Tables, and Mysterious Gaps (en anglais).

Modifié 2 Août 2004 par LaurentDenis

[Nicolas]

Merci Laurent!!

Je vais étudier tout ça!