Float qui se déplace lors d'un survol sous IE7

Bonjour à tous, j'espère que vous passez une bonne soirée car moi là je disjoncte un petit peu grâce au joyeux problèmes d'IE ...

Bref, voici ce qui m'arrive :
J'ai une page divisée en deux. Il y a un float left sur la partie de gauche et un right pour l'autre partie. Dans celui de droite se trouve un menu. Jusque là tout est nickel. Sauf que dans IE7, quand je survole un lien du menu, tout le div de gauche se déplace de 10px vers la gauche ...
J'ai fait d'autre tests sous Opera, Firefox, IE6 et tout fonctionne ...

Pour voir concrètement ce qui se passe :
http://www.biloduo.be/la-nuance/test.htm

En tout cas merci d'avance si vous pouvez m'aider ...
Modifié par biloduo (25 Jan 2007 - 20:04)

Très joli design

Je ne vois pas le problème actuellement, mais je me permettrai deux petits conseils.

D'une part, ce code

h1, h2, h3, h4, h5, h6, pre, blockquote, input, select, td, th, textarea { font-size:0.9em; }
	ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, dl, dt, dd {
		margin:0; padding:0 }

pourrait être tout simplement remplacé par la ligne suivante:

*{margin:0; padding:0 }

* représentant toutes les balises possibles
Il y a des avantages et des désavantages, si tu veux te renseigner, cela s'appelle le "sélecteur universel" (du moins je l'appelle comme ça et je trouve ça joli).

De plus, j'ai vu que tu faisais un fichier de style différent pour IE6, IE7, et les autres. Je te conseillerai de tenter de faire un truc qui marche au maximum sur tous les navigateurs, et lorsque tu as des divergences, apporte juste la correction qu'il faut dans les styles correspondants à IE6 et IE7, sinon tu risques de ne plus t'en sortir dans les mises à jour.

Bonjour,
c'est vrai le design est sympa.
Chez moi ça marche bien dans FF et dans IE (c'est la version 6, je ne l'utilise pas hormis pour des tests).
Bonne chance.

Deux choses :

- Tu utilises deux flottants qui doivent être collés côte à côte au pixel près. C'est théoriquement possible, mais cela peut poser problème à certains navigateurs, ou dans certains cas. Or, pour placer deux blocs côte à côte il suffit d'utiliser un seul flottant. En l'occurence le bloc de contenu principal, vu qu'il est le premier dans le code.
Le bloc suivant (menu) pourra alors avoir une marge à gauche de la largeur du bloc de contenu, ou bien on utilisera un contexte de formatage bloc pour éviter que le contenu du menu ne passe à la ligne si le menu est plus long que le contenu du bloc de contenu.
Je ne sais pas si je suis clair...

- Je ne comprends pas pourquoi tu dupliques ta feuille de style pour apporter des modifications dans les feuilles de style appelées via les commentaires conditionnels. Si tu modifies ta feuille de style principale, il faudra répercuter le changement sur les deux feuilles de style pour IE 6 et 7, ce qui est une perte de temps.
Les feuilles de style appelées via les commentaires conditionnels ne devraient contenir que des correctifs ponctuels, pas des styles complets.

Ouch.

div {
	position: relative;
}

La propriété CSS position n'est pas à utiliser à la légère ! Outre les effets « normaux » du positionnement relatif, certains navigateurs peuvent présenter des bugs liés au positionnement relatif. Surtout Internet Explorer, lorsque le positionnement relatif est utilisé en conjonction avec float, par exemple (et si je me souviens bien).

De manière générale, les sélecteurs trop génériques sont à mon sens une très mauvaise idée. Le pire étant le « reset CSS » qui utilise le sélecteur universel. On utilise généralement ce genre de chose pour éviter quelques désagréments aisément corrigibles... c'est un peu de l'abattage de moustique au lance-roquette.

Instructif : cette intervention de Laurent Denis.