Image decalée avec width 100% sous IE6

Résolu/Fermé
-
 adt -
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.

7 réponses

Messages postés
5129
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 décembre 2021
2 767
Bonjour,

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

--
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.
Messages postés
5129
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 décembre 2021
2 767
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 <img dans le <p class="padbig"> ou dans un <p> isolé.

Sinon, tu résoudras certainement ça facilement en t'y prenant autrement.
Place l'image en background du <p class="padbig">.
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 <li> ou des <a> dans les menus.

--
Merci pour ces propositions Gihef. Je les essaye et je te tiens au courant.

Au cours des essais, j'avais tenté de placer <img dans un <div supplémentaire, sans succès.

adt.
Voici les resultats des divers essais:
J'ai essayé de placer <img dans <p class="padbig"> ou dans un <p> isolé ou dans un <div>
mais cela ne donne rien de bon avec IE6.

La solution <p class="padbig"> 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.
Messages postés
5129
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 décembre 2021
2 767
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.

--
Merci Gihef,
J'ai regardé au lien indiqué et l'effet est bien le même tant que la taille de la police est fixe. Mais si la taille est augmentée (ou diminuée) le rendu est modifié.
Un autre inconvénient mineur selon moi c'est d'avoir à définir une "class" par image à afficher: je ne sais pas actuellement comment paramétrer le nom (voire la hauteur) de l'url dans la class.

Merci de m'avoir signalé le <p> qui traîne. Quel oeil, mieux que w3 ! C'est corrigé maintenant.

adt.
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.