image decalée avec width 100% sous IE6Résolu/Fermé

Question

Bonjour,

voici le problème rencontré: l'image appelée avec <img src=...... > s'affiche bien, mais beaucoup plus bas que voulu, et en laissant un grand trou béant avant.  Apparemment, l'image s'affiche systématiquement après la fin d'une autre division (celle des menus à gauche).
Ce problème apparaît dans ces conditions:
- avec IE6, mais pas avec IE7 ni firefox
- avec une image en width="100%", mais pas avec width="300" par exemple.
- avec la première image de la page seulement;  toutes les autres images suivantes sont affichées correctement.

Si vous voulez voir le code ou bien l'effet visuel, merci de regarder à cette url: http://artsdutao.free.fr/arts_du_tao/adt_contact.php

D'avance merci pour votre aide et vos propositions, ou solution :-).

adt.

Gihef · Answer

Bonjour,

Quelle est l'image qui pose problème ? Son nom ?

--

adt · Answer

Bonjour,

Voici la ligne concernée:
<img src="../picture/hl_212.GIF" height="5" width="100%" alt="---------------">

Le problème se produit aussi pour d'autres images.

Merci,
adt.

Gihef · Answer

Chez moi, je ne peux pas voir l'effet indésirable que tu mentionnes. Je peux quand même te proposer d'essayer d'intégrer cette ou dans un

isolé. Sinon, tu résoudras certainement ça facilement en t'y prenant autrement. Place l'image en background du

. Par exemple .padbig { background : url(../picture/hl_212.GIF) center bottom no-repeat; padding-bottom : 30px; } Si cette solution te plaît, tu pourrais aussi l'utiliser pour les puces des

ou des dans les menus. --

adt · Answer

Merci pour ces propositions Gihef. Je les essaye et je te tiens au courant. Au cours des essais, j'avais tenté de placer

adt · Answer

Voici les resultats des divers essais: J'ai essayé de placer ou dans un

isolé ou dans un

mais cela ne donne rien de bon avec IE6. La solution

marche bien sur la page indiquée en url, mais je crois avoir eu de la chance: En généralisant cette solution j'ai l'impression que l'information d'ajustement automatique en largeur (width=100%) est manquante, et je ne sais pas comment donner cette indication dans la class du css. Un exemple en image: http://artsdutao.free.fr/taichi/ccm_pratique.php (qui ne fait plus de trou sous IE6 mais affiche seulement un coin de l'image) http://artsdutao.free.fr/tai_chi/tcc_pratique.php (qui ne marche pas sous IE6 mais affiche la totalité de l'image) Gihef, j'espère que tu n'es pas a court d'idée, je suis prêt a faire d'autres essais ;-). adt.

Gihef · Answer

Ce que tu as fait fonctionne.
Il faut simplement que tu adaptes l'image.
En règle générale, il est préférable d'avoir des images aux dimensions auxquelles elles vont être affichées.
Donc, inutile de conserver une image de 1536px de large si elle va être affichée dans un bloc de 550px.

En faisant comme ça, et en définissant des dimensions au bloc qui la reçoit, ça passe

.bugie6mont2 { /* essai */
  background : url(montagne2.JPG) left top no-repeat;
  height : 157px;
}

L'effet est le même.

++
Tu as un <p> tout seul qui traîne.

--

tout seul qui traîne. --

adt · Answer

Bonjour,

après d'autres essais la solution retenue est la suivante:

D'une part, deux "class" sont créées dans le css:
.width100 {
	width:100%;
}
.width100bugie6 {
	width:99%;
}

D'autre part, dans les pages on apelle l'une ou l'autre des "class" selon le navigateur.
Ainsi,
- le rendu est quasi identique sous IE6, car l'image est affichée presque sur toute la largeur de la page (99% au lieu de 100%).
- le changement de la taille de la police n'affecte pas le rendu.
- la description "title" (et "alt") des "img" est conservée.
- on conserve des images qui s'adaptent à la largeur de la page, même si la largeur change un jour.
- on gère de façon centralisée les images dans le css.

Merci Gihef pour ton aide sur ce sujet et pour les autres remarques que j'ai mises (ou vais mettre) à profit;
je considère que le problème est résolu.

adt.

Image decalée avec width 100% sous IE6

7 réponses

Discussions similaires

Newsletters