CSS - Alignement de divs horizontalement - différence IE7 & FF

Question

Salut tout le monde ;) Je ne parviens pas à aligner horizontalement mes divs sous Firefox. Voici ce que a donne sous IE7: et ce que ca donne sous FF: Mon fichier HTML: LOGO MENU EXPLAIN PUB MAIN SUBMAIN COMMENT TWITTER QUICKCONTACT COPYRIGHT © 2010 Netside V ²·° -- all rights reserved et ma CSS: html { color:#A6A6A6; font-family:"Lucida Grande",Arial,Verdana,sans-serif; font-size:75%; font-size-adjust:none; font-style:normal; font-variant:normal; font-weight:normal; line-height:130%; } body { /* css a conserver */ height:100%; max-height:100%; margin: 0 auto; /* alignement center FF */ padding: 0; border: 0; text-align:center; /* alignement center IE*/ } .bg1 .bg2 .bg3 .bg4 .bg5 { /* backgrounds */ height: auto; /*hauteur*/ width: 100%; /*largeur*/ margin: 0 auto; } .bg1 { background:#1D1C18; } /*background 1*/ .bg2 { background:#A8A390; } /*background 2*/ .bg3 { background:#E2DED3; } /*background 3*/ .bg4 { background:#131313 url(../images/top_bg4.gif) repeat-x scroll 0 0; } /*background 4*/ .bg5 { background:#131313 url(../images/top_bg5.gif) repeat-x scroll 0 0; text-transform:uppercase; letter-spacing:-1px; } /*background 5*/ #txt {/* divs container */ width: 950px; margin:0 auto; padding: 10px 0 10px 0; text-align:left; } /* bord pour tests */ #logo, #menu_horizontal, #explain, #pub, #comment, #twitter, #quickcontact , #main, #submain { float:left!important!; border: 1px solid red; } #logo { height: 50px; width: 260px; } #menu_horizontal { height: 50px; width: 686px; } #explain { height: 180px; width: 340px; color: #c0c0c0; } #pub { height: 180px; width: 606px; color: #c0c0c0; } #main { height: 350px; width: 636px; } #submain { height: 350px; width: 310px; } #comment, #quickcontact { height: 150px; width: 310px; } #twitter { height: 150px; width: 324px; } En général, on utilise un "float: left;" pour les aligner correctement, mais là, ca fonctionne sous IE7, pas sous FF. Quelqu'un aurait une idée qui me permettrait d'avancer?

Arto_8000 · Answer

À priori ce que je verrais comme problème c'est que tu utilises des tailles fixes pour tes divs. Si la fenêtre de Firefox est légèrement plus petite que celle de IE, le 2e div serait affiché sur la 2e ligne et c'est parfaitement normal. Tu devrais utilisé des tailles relatives (en pourcentage) pour tes divs.

neigedhiver · Answer

Salut,

J'ai pas du tout regardé tes CSS, mais ce serait pas un problème de marges ? IE et Firefox n'ont pas la même façon d'interpréter ça des fois.
En fait, pour bien voir le problème, je te recommande d'utiliser l'extension Firebug pour Firefox, qui te permettra de visualiser les marges (margin et padding) interprétées par Firefox.

Pis si j'ai un peu de temps ce soir, je jette un oeil de manière plus approfondie ;)

-- 
Neige

Souvent la réponse à votre question se trouve dans la doc. Commencez par là ;)

cs_smoke · Answer

Merci pour vos réponses ;)

@Arto_8000: en fait, la taille des divs importe peu dans ce cas:
mon écran à une résolution de 1440px en largeur. De plus, les divs containeur (txt) de 950 px sont imbriquées dans des divs à 100% en largeur.

J'ai testé avec des divs de 10 px et j'obtiens le même résultat.

Si j'applique un float:left, mes divs se placent correctement, mais sortent verticalement des divs container.

Le souci ne vient donc pas de là.

@neigedhiver: j'utilises firebug et ses dépendences depuis sa création, c'est réellement un outil dont je ne pourrais plus me passer pour la réalisation d'un site ;)

J'explore la piste des marges, mais.. entre nous, je suis quasiment sur que ce ne sont pas celles-ci qui posent problème..

Je pourrais mettre une position absolute sur mes divs, mais j'essaye de faire sans, car je tente de créer un site qui sera accessible au plus grand nombre de navigateurs et au plus grand nombre de résolutions.

Si tu as le temps d'y jeter un coup d'oeil, je t'en serais reconnaissant ;)

Arto_8000 · Answer

Bon je viens de regarder ça de plus près et j'ai remarqué que le float: left n'était pas du tout appliqué aux éléments. En creusant un peu j'ai trouvé que tu as une erreur de synthaxe dans ta feuille de style. Il y a un «!» de trop sur ton «float: left».

#logo, #menu_horizontal, #explain, #pub, #comment, #twitter, #quickcontact , #main, #submain {
float:left!important;
border: 1px solid red;
}

cs_smoke · Answer

@Arto_8000: ... hum ...
Ce n'est pas du tout une erreur de syntaxe...

La propriété !important! est un hack CSS propre a IE7.

float:left; <-- s'applique à tous les navigateurs,
float:left!important; <-- s'applique uniquement à IE6,
float:left!important!; s'applique uniquement à IE7, 
ect...

C'est pour cette raison que mon float left n'est pas appliqué sous FF, c'est voulu (c'est pour ça que je demande un coup de main, car mon float left dézingue tout le reste sous FF)

CSS - Alignement de divs horizontalement - différence IE7 & FF

5 réponses

Votre réponse

Discussions similaires