Décalage anormal sous MSIE 6

[MaximuS]

Cette page : -http://www.domtomconnection.com/guadeloupe/annuaire/annu.php (merci de ne pas linker, le site est en construction) s'affiche correctement sur MSIE5 mac, Firefox (on s'en serais douté) mais pas sur MSIE 6 où il s'oppère un décalage vers la gauche progressif.

Un autre problème, le padding des <ul> de la barre de gauche semble = à 0 sur MSIE tandis qu'il est normal sur FireFox.

Vous avez une idée d'où pourrait provenir ces problèmes ?

Modifié 4 Septembre 2004 par MaximuS

[LaurentDenis]

Supprime l'inutile display:block pour le h5 a

[MaximuS]

Je le supprime,

mais je ne comprends pas vraiment pourquoi tu le qualifies de "inutile", quand l'uzer click n'importe où sur la barre bleue, ça va au lien.

Enfin, tant pis ;-)

PS: Dernière petite question: étant privé d'MSIE 6 en ce moment, je ne sais absolument pas à quoi ressemble le site, si vous voyez un bug graphique en passant, prévenez moi !

merci d'avance !

Modifié 4 Septembre 2004 par MaximuS

[LaurentDenis]

Toutes mes excuses : trop pressé hier soir, je ne t'ai fais qu'une réponse minimale et abrupte. En fait, j'avais un mal de crâne de première, ayant fraîchement perdu mes lunettes toutes neuves

Bref, je vois bien l'intérêt du clik sur la zone entière et pas seulement sur le texte du lien... Quoique ce soit inhabituel.

Tu dois pouvoir retrouver ce comportement sans passer par le display:block, en jouant sur la largeur/hauteur du <a>, il me semble.

Sinon, la page me semble à présent correcte sous IE6.

[Raphael]

Tu dois pouvoir retrouver ce comportement sans passer par le display:block, en jouant sur la largeur/hauteur du <a>, il me semble.

Toutes mes certitudes s'effondrent !!

On peut donner des dimensions à une balise <a> ?? (pourtant en-ligne non remplacée)

Mes dernières trouvailles étaient :

Les éléments "remplacés" sont donc les seuls qui possèdent des dimensions (height, width) par défaut. Il s'agit des éléments IMG, INPUT, TEXTAREA, SELECT, et OBJECT.

Pour tous les autres éléments en-ligne (cf http://www.w3.org/TR/REC-CSS2/visudet.html...ths_and_margins et http://www.w3.org/TR/REC-CSS2/visudet.html...hts_and_margins :

- The 'width' property does not apply. A specified value of 'auto' for 'left', 'right', 'margin-left' or 'margin-right' becomes a computed value of '0'.

- The 'height' property doesn't apply, but the height of the box is given by the 'line-height' property.

Personne ne m'avait contredit, alors qu'en est-il : peut-on donner une hauteur/largeur à <a> contrairement à ce que disent les explications du W3C ?

... Ou doit-on bidouiller ? A ma connaissance, le seul moyen est bien de passer la balise <a> en block (display, position absolue ou float)

[MaximuS]

Sinon, la page me semble à présent correcte sous IE6.

? ! ?

Un ami (que je remercie beaucoup au passage) m'a fait plusieurs screens du site, les voici :

http://code03.com/divers/screen/screen_IE6.jpg

http://code03.com/divers/screen/screen_Firefox.jpg

Sur FireFox, on voit le menu en bleu foncé juste en dessous de l'image => il n'apparait pas sous MSIE

Sur FireFox, on voit au dessus du main jaune de droite "Mayotte" en <h2> et "Annuaire des sites de Mayotte" en <h3>. => Le <h2> est coupé en 2 sur MSIE.

Il semblerait qu'il n'apparaisse pas la même chose chez vous ?!?

Vraiment bizarre...

Modifié 5 Septembre 2004 par MaximuS

[LaurentDenis]

Pour les liens a dans les titres h5, curieusement :

h5 a {
display: block;
width: 100%;
}

semble finalement passer. Sinon, pour obtenir un comportement de bloc sans passer par display, on peux par exemple utiliser une position absolue ou un float dans le titre doté d'une hauteur...

Pour le menu bleu qui disparait, ce sont les deux white-space:nowrap qui provoquent cette disparition dans IE...

[Monique]

Bonjour,

Chez moi l'affichage est bon avec IE 6 !

[Raphael]

Sinon, pour obtenir un comportement de bloc sans passer par display, on peux par exemple utiliser une position absolue ou un float dans le titre doté d'une hauteur...

Je ne suis pas sûr d'avoir compris.

En fait, c'est bien ce que j'ai écrit, non ?

A ma connaissance, le seul moyen est bien de passer la balise <a> en block (display, position absolue ou float)

Toi, tu parles de mettre le titre (et non le <a>) en positionné. N'est-ce pas plus lourd à gérer ?

[Bobe]

Toutes mes certitudes s'effondrent !!

On peut donner des dimensions à une balise <a> ?? (pourtant en-ligne non remplacée)

Non non, on ne peut effectivement pas, sauf si l'élément A en question est positionné ou qu'il flotte (Auquel cas, display passe automatiquement en block; http://www.yoyodesign.org/doc/w3c/css2/visuren.html#q24)

[Raphael]

Non non, on ne peut effectivement pas, sauf si l'élément A en question est positionné ou qu'il flotte (Auquel cas, display passe automatiquement en block; http://www.yoyodesign.org/doc/w3c/css2/visuren.html#q24)

Oui, encore une fois c'est bien ce que j'écris ensuite, non ?

A ma connaissance, le seul moyen est bien de passer la balise <a> en block (display, position absolue ou float)

En tout cas, merci pour ces confirmations

[MaximuS]

Alors là, je suis vraiment étonné ! (pas seulement pour les effets de l'inlinité de <a>)

Monique dis que l'affichage est clean chez elle, et ça n'est pas le cas chez d'autres...

Koakil en soit, j'ai fait les modifs suggérés par laurent (enlever le nowrap) et j'ai descendu un peu le menu au passage, (si il y a un wrap trop grand, le menu se superposerais).

J'èspère que ça tiendra la route

(J'ai presque envie de dire "A bas les CSS, les internautes se contentront d'une version "Disable Styles" ;-) )

[Bobe]

Oui, encore une fois c'est bien ce que j'écris ensuite, non ?

En tout cas, merci pour ces confirmations

Oui, j'apportais juste une précision, comme tu ne semblais pas sùr de toi...