Problème avec clear:right; sous IE6

Bonjour !

J'ai des cheveux en moins avec cette mise en page, qui fonctionne très bien sous FF2 (Linux), moyennement sous Opera9 (Linux), et très très mal sous IE6 (Windows). Je n'ai pas pu avoir de testeur pour IE7. Je précise que je n'ai aucune liberté sur cette mise en page (je suis tenu de la suivre), et que le fait que j'ai a peine évoqué le media n'a rien à voir avec du papier millimétré a quasi fait grincer des dents.

Pour faire cette mise en page, j'ai pris comme idée de faire 4 DIV et une liste UL en flottants.

Pour que la page soit lisible (au lieu de coller le code ici), je l'ai placée sur http://www.baguette.net/css/essai_quater/

J'ai décomposé le problème et j'ai pu identifier, à priori, trois parties différentes :

Tout d'abord, le fond d'écran doit se trouver tout en bas à gauche de la fenêtre du browser. J'ai donc spécifié dans le body un "background-position:bottom left;" qui fonctionnait très bien, jusqu'à ce que je me décidé à spécifier un DOCTYPE (pour que la page soit bien formée), et là, pan dans la gu....
Sous FF, le fond ne s'affiche plus en bas à gauche du browser, mais à gauche du browser, en prenant comme hauteur la hauteur du DIV le plus grand (dirait-on).
Sous Opera, le fond ne s'affiche carrément plus du tout ! J'ai testé en spécifiant un "background-color:transparent;" pour le 'menu' et le 'logo', mais aucun effet.
Finalement, ce DOCTYPE me cause plus de soucis qu'autre chose. Ai-je spécifié un mauvais DOCTYPE ? (je pensais avoir choisi le bon ?).

Ensuite : IE6 (Windows), me renvoie le DIV 'content' à droite du DIV 'header' alors que j'ai pourtant spécifié un clear:right pour ce dernier !
J'ai cherché (mal?) à propos d'un éventuel bug concernant IE6 et le clear:right; et je n'ai rien trouvé de probant.
Que dois-je corriger/changer pour que cela fonctionne ?

Enfin, le menu de gauche : j'ai deux niveaux possibles, soit un 1er niveau (largeur plein pot), soit un 2e niveau (175 pixels de large, et vide de 15 pixels sur la gauche).
J'ai vu le bug d'IE concernant le padding, j'ai donc utilisé à la place un margin-left.
Le menu fonctionne très bien sous FF et Opera, mais absolument pas sous IE6.
Est-ce le display utilisé sur les liens qui est en cause, ou bien est-ce la technique utilisée pour le décalage du niveau 2 qui est en cause ?
Que puis-je corriger/changer pour y remédier ?

D'avance merci pour vos pistes et/ou vos lumières !



Note de l'auteur : Le titre original de ce fil était "DOCTYPE sous Opera9 + problème avec clear:right; sous IE6"
Modifié par Bouchon (03 Mar 2008 - 23:38)

Bouchon a écrit :
Tout d'abord, le fond d'écran doit se trouver tout en bas à gauche de la fenêtre du browser. J'ai donc spécifié dans le body un "background-position:bottom left;" qui fonctionnait très bien, jusqu'à ce que je me décidé à spécifier un DOCTYPE (pour que la page soit bien formée), et là, pan dans la gu....
Sous FF, le fond ne s'affiche plus en bas à gauche du browser, mais à gauche du browser, en prenant comme hauteur la hauteur du DIV le plus grand (dirait-on).
Sous Opera, le fond ne s'affiche carrément plus du tout ! J'ai testé en spécifiant un "background-color:transparent;" pour le 'menu' et le 'logo', mais aucun effet.
Finalement, ce DOCTYPE me cause plus de soucis qu'autre chose. Ai-je spécifié un mauvais DOCTYPE ? (je pensais avoir choisi le bon ?).

Bonsoir !

J'ai corrigé ce problème en indiquant un height et un width à 100% pour le sélecteur 'html' et 'body'. (C'était déjà le cas pour le sélecteur 'body', mais pas pour le sléecteur 'html').

Le DOCTYPE est resté bien là à sa place et je m'excuse auprès de lui car il n'en pouvait rien.

Par contre, je suis toujours bloqué pour les deux autres problèmes...

Des pistes ?

D'avance merci !
Modifié par Bouchon (03 Mar 2008 - 23:40)

Bonjour,

Pourquoi le header est-il positionné en float ? En ce qui me concerne, là où tu vois deux lignes, je vois deux colonnes

La structure de base de la page telle que je la concevrait :

<div id="sidebar">
  <img id="logo" src="logo" />
  <ul id="menu">
     ...
  </ul>
</div>
<div id="main">
  <div id="header">
    ...
  </div>
  <div id="content">
    ...
  </div>
</div>

Il "suffit" alors de positionner correctement les 2 colonnes pour s'en sortir :

#sidebar {
  float: left;
  width: XXXpx;
}
#content {
  overflow: hidden; /* empêche le texte de passer sous la colonne flottante si #content est plus long que #sidebar */
}

Avec une petite correction pour IE6 :

#content {
  overflow: visible;
  height: 1px;
}

Bonjour !

J'étais tellement sur ce problème avec IE6 que je n'ai pas songé un instant de modifier la facon de voir le document !

Je teste ca aujourd'hui et je te tiens au courant !

Merci beaucoup, en tout cas !