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

Signaler
Messages postés
28
Date d'inscription
lundi 26 juillet 2004
Statut
Membre
Dernière intervention
18 mai 2011
-
Messages postés
28
Date d'inscription
lundi 26 juillet 2004
Statut
Membre
Dernière intervention
18 mai 2011
-
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<link type="text/css" href="css-scripts/style.css" rel="stylesheet">
</head>





LOGO


MENU







EXPLAIN


PUB







MAIN


SUBMAIN







COMMENT


TWITTER


QUICKCONTACT





COPYRIGHT &#169; 2010 Netside V &#178;&#183;&#176; -- all rights reserved




</head>



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?

5 réponses

Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
7
À 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.
Messages postés
2480
Date d'inscription
jeudi 30 novembre 2006
Statut
Membre
Dernière intervention
14 janvier 2011
18
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à ;)
Messages postés
28
Date d'inscription
lundi 26 juillet 2004
Statut
Membre
Dernière intervention
18 mai 2011

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 ;)
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
7
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;
}
Messages postés
28
Date d'inscription
lundi 26 juillet 2004
Statut
Membre
Dernière intervention
18 mai 2011

@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)