[résolu] Problème avec IE, design avec 3 colonnes

Premièrement, bonjour!

Tout d'abord, désolé à l'avance de ne pas poster de lien vers un exemple du problème, mais c'est un projet pour mon travail, donc je ne peux pas le démontrer

Donc ma page contient un "container", qui lui contient un "header" puis 3 colonnes (sous-menu, contenu, informations relatives a la page).

Le problème que je rencontre est que sous Internet Explorer, le contenu de la boite de contenu qui est aligné avec le menu de gauche est décalé de quelques pixels (environ 5). Dès que la boîte du sous-menu se termine, le contenu se replace immédiatement où il devrait être.

En espérant que l'image ne vous mélange pas...
http://img242.imageshack.us/my.php?image=exempleprobleme6pl.gif

Vous pouvez voir mon sous-menu (encadré par une bordure d'un pixel) et vous pouvez voir ensuite à sa droite le contenu de la page. Ce qui vous semble probablement être le titre ("Te" écrit en blanc sur fond bleu) est décalé d'environ 5 pixels. Tous les 200 sont également décalés de 5 px. Tous, sauf les 2 derniers, cars ils ne sont pas enlignés avec le menu de gauche.

Maintenant que le problème est, j'espère, bien expliqué, je vais écrire le code.

HTML

<div id="container">
  <div id="header">
  </div>
  <div id="sous_menu">
    <ul></ul>
  </div>
  <div id="information">
  </div>
  <div id="main">
    <div>ligne1</div>
    <div>ligne2</div>
    <div>ligne3</div>
    <div>ligne4</div>
  </div>
</div>

CSS

body {
  padding: 0;
  margin: 0;
  font-family: Tahoma;
  font-size: 10pt;
  color: #012c5c;
}

#container {
  margin-left: 5%;
  margin-right: 5%;
  padding: 0;
}

#sous_menu {
  width: 225px;
  background-image: url(../images/sous_menu_bg.gif);
  background-position: bottom left;
  background-repeat: no-repeat;
  padding: 10px 5px 95px 0;
  float: left;
}

#sous_menu ul {
  margin: 0;
}

#sous_menu ul li {
  list-style-type: square;
  margin-left: 60px;
  margin-bottom: 5px;
}

#main {
  padding: 0;
  margin-left: 225px;
  margin-right: 225px;
}

#information {
  width: 225px;
  float: right;
  padding: 0 0 0 5px;
}

Mais je ne crois pas avoir une erreur, car ça s'affiche bien dans Firefox / Netscape. Alors je me demandais si quelqu'un ici connaissait le problème, et s'il connaissait une solution

Merci!
Modifié par DarkMalow (26 Jul 2005 - 00:23)

C'est le IE Three Pixel Text-Jog.

La solution consiste à donner une dimension (hauteur ou largeur, peu importe) à la boîte flanquant le float.

<edit>En pratique ici, une hauteur fictive #main {height : 1%;} par exemple fera l'affaire. IE ayant une implémentation incorrecte de height, il n'en tiendra pas compte pour la hauteur réelle de #main, mais cela neutralisera le bug. En revanche, il faut masquer cette règle aux autres navigateurs (CSS conditionnelle)
Modifié par Laurent Denis (25 Jul 2005 - 21:34)

Merci bien pour la réponse rapide