Image decalée avec width 100% sous IE6

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.

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/taichi/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.

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.

--

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.