[Résolu] Positionnement d'images et IE 5.x

Bonjour,

Je rencontre un pb étrange sur le site sur lequel je travaille.
Voilà le site : http://www.centrenaturodargere.com/presentation.php
Sous Firefox, le bandeau du haut apparait bien sur une seule ligne. Sous IE 6, idem.
Par contre sous IE 5.x, le dernier élément retourne systématiquement à la ligne !
Si je réduis la dernière image de 2 px, IE 5.x accepte d'afficher les 3 images sur une seule ligne, mais bien entendu, j'ai 2 px de vide à droite

Mon code Css :

#haut-1 {
 margin: 0;
 padding: 0;
 float: left;
 width: 238px;
 height: 101px;
 background: url(images/haut-1.jpg); 
 border: 0px;
}

#haut-2 {
 margin: 0;
 padding: 0;
 float: left;
 width: 432px;
 height: 101px;
 background: url(images/haut-2.jpg); 
 border: 0px;
}

#haut-3 {
 margin: 0;
 padding: 0;
 float: left;
 width: 100px;
 height: 101px;
 background: url(images/haut-3.jpg); 
 border: 0px;
}

Et mon code HTML :

<div id="haut-1">
</div>

<div id="haut-2">
</div>

<div id="haut-3">
</div>

Modifié le 31 Jan 2005 - 13:52

Salut,

Je n'ai pas IE5 sous la main pour tester, mais ton problème n'aurait-il pas un rapport avec le box model foireux sous IE 5.x ?

C'est ce à quoi j'ai pensé tout de suite !
Mais... :
- le problème n'apparait pas sous IE6 (le pb du model box est universel non ?)
- la zone qui contient le bandeau composé de 3 images est dans une zone définie par :

.header {
 margin: 0;
 padding: 0;
 height: 101px;
 background-color: #FFFFCC;
 text-align: left;
}

Donc.... sans marge et sans padding

EcliptuX a écrit :

- le problème n'apparait pas sous IE6 (le pb du model box est universel non ?)

Non. IE6.0 peut adopter l'un ou l'autre mode de rendu, en fonction de la présence et de la syntaxe précise de la DTD. Dans le cas de http://www.centrenaturodargere.com/presentation.php , il est en mode de respect strict des standards (et donc en box model CSS1, non microsoft)

Supprime la DTD : IE6.0 bascule en mode quirks, applique le même box model qu'IE5.x... et ta mise en page se casse la figure. C'est bien un problème de box-model (voir ci-dessous).
Modifié le 31 Jan 2005 - 13:04

EcliptuX a écrit :

- la zone qui contient le bandeau composé de 3 images est dans une zone définie par :

.header {
...
}

Donc.... sans marge et sans padding

... elle-même contenue dans #global, qui a une largeur spécifiée de 770px et des bordures latérales d'un px... soit 768px de largeur disponible dans IE5.x pour un contenu de 238+432+100=770px. Voilà où sont tes 2px d'espace manquant

D'une manière générale, mieux vaut:
- éviter ces mises en pages au pixel près
- laisser de la marge, du jeu
- bref, bee cool to be strict
Modifié le 31 Jan 2005 - 13:05

Chapeau pour le coup d'oeil Laurent Denis

J'ai en effet fixé le global à 770px pour des raisons de compatibilité avec les 800x600
Ce bandeau a été la dernière partie de code à être traduite en CSS/XHTML. J'utilisais jusqu'à présent un tableau avec une partie auto-extensible à 100%
Ca me donnait donc un bandeau qui tenait la route en toute circonstance.
Du coup sur ce coup, je ne sais pas trop comment adapter mon code pour garder cette compatibilité 800x600
Tu me suggères de laisser un peu de jeu, mais après avoir pas mal tatonné pour avoir un site centré horizontalement et verticalement, il est conseillé (sur ce site d'ailleurs ), d'avoir une largeur fixe. Ca semble être aussi pratique pour avoir le même résultat quelque soit la résolution du visiteur.
Donc je veux bien essayer d'être un peu plus "cool" mais sur ce coup, je ne sais pas trop comment m'y prendre

EcliptuX a écrit :

Ce bandeau a été la dernière partie de code à être traduite en CSS/XHTML. J'utilisais jusqu'à présent un tableau avec une partie auto-extensible à 100%
Ca me donnait donc un bandeau qui tenait la route en toute circonstance.
Du coup sur ce coup, je ne sais pas trop comment adapter mon code pour garder cette compatibilité 800x600

Reviens à ta solution "tableau" :
- ça marche
- tu maîtrise la technique
- ça ne remet pas en cause l'accessibilité de la page (tableau non imbriqué, etc)

Merci du conseil : honnête et efficace