Discussion :

[trotters213]

Aujourd'hui j'ai des problèmes
Sur mon site, j'ai un affichage différent entre FF et Opera/IE sur le pied de page.
Sous IE et Opera, il y a un grand espace entre le pied de page et le contenu tandis que sous FF, il n'y est pas.
Comment réglé ça?

merci d'avance.

[Candygirl]

#pied_page {

clear:both;

margin:50px 17px 0px 11px;

padding:10px 0px 0px 0px;

text-align:right;

}

[trotters213]

je crois avoir trouvé le problème, je sais pas si quelqu'un le savait mais les marges verticales se superpose donc quand tu as un élément A avec margin-bottom:10px; au dessus d'un élément B avec margin-bottom:20px; ça n'est pas la somme qui est prise mais la valeur la plus grande donc dans ce cas, 20px).
Je teste et je donne la soluce.

[Bisûnûrs]

je crois avoir trouvé le problème, je sais pas si quelqu'un le savait mais les marges verticales se superpose donc quand tu as un élément A avec margin-bottom:10px; au dessus d'un élément B avec margin-bottom:20px; ça n'est pas la somme qui est prise mais la valeur la plus grande donc dans ce cas, 20px).
Je teste et je donne la soluce.

Oulah ...

En effet, je viens de faire un test tout con :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div style="margin-bottom:10px;width:100px;height:100px;background:#f00"></div>
<div style="margin-top:20px;width:100px;height:100px;background:#0f0"></div>

Et l'écart est bien de 20px et non de 30.

Tu viens de m'apprendre quelque chose, j'espère que ça va résoudre ton problème.

[Candygirl]

je crois avoir trouvé le problème, je sais pas si quelqu'un le savait mais les marges verticales se superpose

Oui, ça s'apelle la fusion des marges (collapsing margins). Dans ton cas à toi, la marge du top de ton footer ne se voit pas sur FF à cause des flottant au-dessus, par contre IE l'applique depuis le bas des flottants d'où l'espacement.

EDIT: Pour FF, vu que ton footer se trouve sous ton contenu, la marge s'applique depuis le bas de ton contenu et comme ton contenu n'a pas de hauteur, la marge commence depuis tout en haut. Tu peux essayer de mettre une marge de 400px au lieu de 50 tu verras alors un espace se créer sur FF uisque 400px est plus que tout ton contenu. Autrement tu peux tester ceci: tu gardes tes 50px dans le footer et tu rajoutes un <div style="clear:both;"></div> (juste pour un test) tout en bas de ton contenu pour faire descendre le contenu jusqu'en-dessous des flottants et là tu verras ton espace de 50px aussi sur FF.

[trotters213]

Bon alors, j'ai réglé mon problème (c'est visible toujours au même endroit) en utilisant des padding plutôt que des margin.
Par contre j'ai un nouveau problème qui est apparu (sous IE pour pas changer) : le logo en haut à gauche de l'écran et à moitié effacé par le menu. J'ai donc essayé en mettant background:none à mon menu, en utilisant des z-index, ... rien à y faire, je ne vois pas pourquoi ça me fait ça.

[Candygirl]

je ne vois pas pourquoi ça me fait ça.

#menu {

position:relative;

width:100%;

}

ça sert à quoi ça ? Je pense que c'est lui le responsable.

Autrement je pense que tu as plus de hack IE que nécessaire. Plus tu as de trucs définis dans ton css plus tu as de source de problème. Perso j'ai fait un test en virant tous tes hack IE, le 100% de width du menu(le logo apparaît alors en entier), modifier 1.2 truc niveau du css du menu et du jscript et il me semble qu'on arrive à qqch de tout à fait correcte sur les 3 navigateurs. Si ça t'intéresse que je détaille, dis-le moi

[trotters213]

Je sais que c'est lui mais si je l'enlève, j'ai des problèmes d'affichage au niveau du menu.

Détaille