[Résolu] IE : décalage de 3px récalcitrant !!!

Ca n'est pas une nouveauté, IE gère très mal des éléments flottants... Il existe malgré tout plusieurs hacks pour régler ces problèmes (cette page, in english, est très instructive).

J'ai créé une feuille de style spécifique à IE (même si je n'aime pas trop faire ça en règle générale). J'ai réussi à régler le "float drop", à savoir la colonne de gauche qui se retrouvait en dessous de ma colonne de droite grâce au WinIE three pixel gap fix.

Mon menu à gauche se retrouve donc là où il est censé se retrouver (ouf), mais maintenant il apparaît un décalage de 3 pixels entre ma colonne de gauche (#menu_submenu) et ma colonne de droite (#logo_contenu). Tout se passe comme si j'avai un padding-left de 3px pour l'élément #logo_contenu, et même en définissant explicitement un padding à 0, nada. Idem pour le jeu sur les marges... vraiment exaspérant.

Voici la capture d'écran :



J'ai essayé quasiment tout ce que à quoi j'ai pu penser depuis 2 jours mais rien n'y fait : j'ai ce désespérant écart de 3pixels qui apparaît Je pourrai changer complètement de logique de mise en page mais concrètement je ne veux pas me lancer à tout refaire et surtout je veux comprendre ce qui se passe . Mais là j'ai la tête tellement dedans que je ne vois plus rien

Si quelqu'un peut m'aider, j'apprécierai !
L'adresse :
http://www.nodeo.net/fuchslock/voyages/alsace.html

Merci

Et désolé pour ma CSS qui n'est ni commentée, ni nettoyée à ce stade...
Modifié par davidm (06 Jan 2006 - 16:49)

bonjour,

Je pense que l'erreur vient du logo

essai de rajouter un

display: block;

à ton #logo img
Modifié par Philippe (06 Jan 2006 - 15:24)

Merci philippe, j'avais essayé cette solution, et j'ai re-testé au cas où car j'ai essayé tellement de choses... ça ne change rien...

Quelqu'un d'autre a une idée ?

Bon, ça y est j'ai trouvé la solution !

Pas vraiment orthodoxe mais bon avec IE tout les moyens sont bons pour régler les problèmes, ou plutôt dans mon cas les contourner.

Je pense que mon problème est lié à l'imbrication d'éléments et au mode de calcul de la taille des éléments. Si on ajoute le 3px gap fix, ça doit encore compliquer l'équation.

Bon enfin voilà comment j'ai résolu le problème : je me suis dit que je n'avais qu'à sortir le #logo du flux de la page, autrement dit lui assigner une position:relative en forcant un décalage de -3px à gauche... et ça marche !

Le code :

#logo {position: relative;
top: 0px;
left: -3px;
margin: 0 auto;
background-color: white;
}

En tout cas j'espère presque que les rumeurs de rachat d'Opera par Microsoft sont fondées, car au moins on aurait un navigateur M$ qui respecterai un minimum les standards !!!

Pfff....