Effet :hover sur IE qui supprime les margin :s

Bonjour à tous,

J'ai un petit souci sur IE, je pense qu'il a du mal à interpreter les :hover sur mon site ( http://www.grid-france.fr ).

Lorsque l'on survol un lien, il casse la mise en page en supprimant les margin, et ainsi fait bouger tout le texte.

Exemples :

Texte :

Avant le survol :

http://grid-france.fr/vu/sanssurvol.gif

Après le survol :

http://grid-france.fr/vu/avecsurvol.gif


Menu :

Avant le survol :

http://grid-france.fr/vu/sanssurvol1.gif

Après le survol :

http://grid-france.fr/vu/avecsurvol1.gif


Serie de liens :

Avant le survol :

http://grid-france.fr/vu/sanssurvol2.gif

Après le survol :

http://grid-france.fr/vu/avecsurvol2.gif

Je n'arrive pas à trouver une solution pour qu'IE arrete de faire ce qu'il veut, si vous auriez une solution merci.
Modifié par Super_baloo8 (11 Jun 2006 - 14:22)

Petit up.

J'ai essayé les méthode ecrite dans ce post mais en vain :s

Sur IE7 ca ne le fais pas. AIdez moi svp, merci

Désolé, pas pu tester, ça fait planter mon IE sous Wine… j'ai juste eu le temps d'apercevoir le site.

Au fait, « ici » s'écrit sans cédille (donc pas « içi »)… cédille qui serait d'ailleurs inutile, vu que le C devant un I se prononce déjà .

Juste une chose, il me semble que pour ton menu tu as une prise en compte des espaces non significatifs (comme les retours à la ligne dans le code). Un petit bug de halayout :
Contenu en display:block et sans layout d'un item de liste.

Un petit

ul#menu li a {width: 100%;}

semble tout indiqué.
Note : j'ai écris ul#menu au pif, ça correspond sans doute à autre chose dans ton code.

Salut,

Il y a deux bugs d'IE dans le coup.
Pour le premier, essaie par exemple de remplacer la padding:1%; de #contenu par en valeur en px.
Pour en savoir plus sur ce bug : http://www.positioniseverything.net/explorer/percentages.html

Le second, c'est celui visible sur le menu, comme l'a signalé Mpop ci-dessus. On peut ajouter une propriété qui va doter les ancres de layout. Un exemple (avec <span> à la place de <a>, mais cela revient au même) : http://www.test.blog-and-blues.org/haslayout/tests/list5.html
Modifié par Alan (26 Jun 2006 - 08:16)

Merci Alan pour l'info sur le premier bug.
Pour ton second lien, c'est celui que je donnais juste au dessus.
(Pour une fois que je faisais l'effort de penser à nos amis utilisateurs de lecteurs d'écrans, qui préfèrent des liens avec des vrais mots que des liens qui disent « ache té té pé deux-points barre oblique barre oblique double-vé double-vé double-vé point test point blog ande bluès point org barre oblique asselaïoute barre oblique test barre oblique liste cinq point ache té aime elle » …)