J'ai passé une heure hier au soir à essayer de comprendre pourquoi une page qui marchait parfaitement avec Firefox et avec Safari, me donnait un truc affreux avec IE : décalage à droite de toute la page en dessous du header, et donc bien entendu une page illisible.

Au final, je me suis rendu compte que la page en question sous IE avait un problème avec les balises H1 (et H2, mais cela devait être aussi vrai pour les niveaux suivants) quand on utilisait la propriété CSS position. Je cherchais juste à mettre un titre et un sous-titre bien placés par rapport à l'image de fond du DIV container. Et pour des raisons logiquement sémantique, je m'étais dis qu'un H1 et un H2 étaient les bonnes balises, comme dans l'exemple suivant.

Après de multiples essais, en enlevant la plupart des éléments de la page, je me suis rendu compte que le seul moyen de corriger le problème était d'utiliser des balises P au lieu des balises H, comme dans l'exemple suivant. Au passage, si quelqu'un peut m'indiquer un outil sous IE (gratuit de préférence) me permettant de faire les même choses que Firebug pour Firefox, je lui en serai très reconnaissant. En fait, en cherchant trente secondes, la solution est peut-être Firebug Lite tout simplement ?

Mais vous savez le plus drôle ? J'ai ensuite passé 15 minutes à essayer de mettre en place un test reproduisant le problème en copiant les fichiers originaux et en faisant de légères modifications pour avoir le nécessaire et le suffisant. Mais sans succès ! IE me montre la page correctement ! Pourtant, je n'étais pas le seul à avoir eu le problème.

J'en viens à penser que IE est capable d'apprendre, il suffit de lui taper dessus suffisamment longtemps. Ou bien que le problème était un glitch de character encoding (plus probable).