Problème affichage sur Firefox

Bonjour

J'ai un problème d'affichage sur Mozilla sur mon site http://ns32950.ovh.net/~immo/ et je voudrais que cela s'affiche comme sur IE.
Le site est composé de 3 parties (gauche, milieu et droite).
J'ai mis des puces sur le bloc de gauche et sur Mozilla cela est trop espacé.
Je voudrais également que les 2 blocs de gauche soient alignés en haut comme le bloc de droite "Horizon".
J'espère que vous pourrez m'aider.

Voici ma feuille de style :

body {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
color:#000000;
font-family: Arial, Helvetica;
font-size: 10pt;
font-weight: normal;
text-decoration: none;
}

td {
text-align: left;
}

ul {
list-style-type: square;
}

li {
color: #FFFFFF;
display: list-item;
}

a img{
border: 0px;
}

a {
color: #000000;
text-decoration: none;
}

#global {
position: absolute;
width: 940px;
left: 50%;
margin-left: -470px;
}

#haut {
margin-bottom: 30px;
}

#gauche {
float: left;
width: 150px;
margin-right: 5px;
}

#bloc_gauche {
width: 150px;
}

#bloc_gauche dl, dt, dd { /* suppression de toutes les marges */
margin: 0;
padding: 0;
}

#bloc_gauche dt {
margin-bottom: 10px;
color: #082D6B;
font-family: Helvetica, Arial;
font-size: 18px;
line-height: 95%;
}

#bloc_gauche dd {
background: url("images/bloc_gauche.gif") bottom left no-repeat;
background-color: #5272B2;
margin: 0 0 10px 0;
padding: 2px 0 2px 0;
text-align: justify;
}

#bloc_gauche p{
margin:0 10px 0 10px;
color: #082D6B;
font-family: Helvetica, Arial;
font-size: 8pt;
}

#bloc_gauche a { padding-left: 10px; font-family: Helvetica, Arial; font-size: 9pt; font-weight: bold; font-style: normal; text-decoration: none; }
#bloc_gauche a:link { color: #FFFFFF; } /* unvisited links */
#bloc_gauche a:visited { color: #FFFFFF; } /* visited links */
#bloc_gauche a:hover { color: #082D6B; } /* user hovers */
#bloc_gauche a:active { color: #082D6B; } /* active links */
}

#milieu {
float: left;
width: 585px;
margin-right: 5px;
}

#edito {
width: 585px;
}

#edito dl, dt, dd { /* suppression de toutes les marges */
margin: 0;
padding: 0;
}

#edito dt {
background: url("images/edito.gif") bottom left no-repeat;
background-color: #7ECFE3;
margin: 0 0 10px 0;
padding: 2px 0 4px 6px;
color: #FFFFFF;
font-size: 18px;
text-align: justify;
}

#edito dd {
background: url("images/edito.gif") bottom left no-repeat;
background-color: #7ECFE3;
margin: 0 0 10px 0;
padding: 2px 0 4px 0;
text-align: justify;
}

#edito p {
margin: 0 10px 0 10px;
color: #FFFFFF;
font-family: Helvetica, Arial;
font-size: 10pt;
font-weight:bold;
}

#edito a { padding-left:10px; font-family: Helvetica, Arial; font-size: 10pt; font-weight: bold; font-style: normal; text-decoration: none; text-transform: uppercase; }
#edito a:link { color: #FFFFFF; } /* unvisited links */
#edito a:visited { color: #FFFFFF; } /* visited links */
#edito a:hover { color: #3585A3; } /* user hovers */
#edito a:active { color: #3585A3; } /* active links */

.bloc {
float: left;
width: 291px;
text-align: left;
}

#cadre_groupes {
width: 291px;
}

#cadre_groupes dl, dt, dd { /* suppression de toutes les marges */
margin: 0;
padding: 0;
}

#cadre_groupes dt {
background: url("images/cadre_vert.gif") bottom left no-repeat;
background-color: #99A612;
margin: 0 1px 5px 0;
padding-left: 10px;
color: #FFFFFF;
font-size: 18px;
text-align: justify;
}

#cadre_groupes dd {
margin: 0 0 10px 0;
text-align: justify;
}

#cadre_groupes p {
margin: 0 10 0 10px;
color: #000000;
font-family: Helvetica, Arial;
font-size: 9pt;
}

#cadre_infos {
width: 291px;
margin-left: 2px;
}

#cadre_infos dl, dt, dd { /* suppression de toutes les marges */
margin: 0;
padding: 0;
}

#cadre_infos dt {
background: url("images/cadre_violet.gif") bottom left no-repeat;
background-color: #90A8D1;
margin: 0 0 5px 0;
padding-left: 10px;
color: #FFFFFF;
font-size: 18px;
text-align: justify;
}

#cadre_infos dd {
margin: 0 0 10px 0;
text-align: justify;
}

#cadre_infos p {
margin: 0 10px 0 10px;
color: #000000;
font-family: Helvetica, Arial;
font-size: 9pt;
}

#cadre_evenements {
width: 291px;
margin-left: 2px;
}

#cadre_evenements dl, dt, dd { /* suppression de toutes les marges */
margin: 0;
padding: 0;
}

#cadre_evenements dt {
background: url("images/cadre_parme.gif") bottom left no-repeat;
background-color: #B04562;
margin: 0 0 5px 0;
padding-left: 10px;
color: #FFFFFF;
font-size: 18px;
text-align: justify;
}

#cadre_evenements dd {
margin: 0 0 10px 0;
text-align: justify;
}

#cadre_evenements p {
margin: 0 10px 0 10px;
color: #000000;
font-family: Helvetica, Arial;
font-size: 9pt;
}

#cadre_formations {
width: 291px;
}

#cadre_formations dl, dt, dd { /* suppression de toutes les marges */
margin: 0;
padding: 0;
}

#cadre_formations dt {
background: url("images/cadre_orange.gif") bottom left no-repeat;
background-color: #F5C17D;
margin: 0 1px 5px 0;
padding-left: 10px;
color: #FFFFFF;
font-size: 18px;
text-align: justify;
}

#cadre_formations dd {
margin: 0 0 10px 0;
text-align: justify;
}

#cadre_formations p {
margin: 0 10px 0 10px;
color: #000000;
font-family: Helvetica, Arial;
font-size: 9pt;
}

hr{
clear:both;
visibility:hidden;
}

#droite{
float: left;
width: 173px;
}

#horizon {
float:left;
background: url("images/horizon.gif") top no-repeat;
background-color: #FFF0D5;
width: 100%;
margin-bottom: 10px;
padding-top: 34px;
}

#bas_horizon {
background: url("images/fond_horizon.gif") left bottom no-repeat;
padding-bottom: 10px;
}

#horizon p {
margin: 0px 4px 0px 4px;
padding: 5px;
color: #000000;
font-family: Helvetica, Arial;
font-size: 8px;
font-weight: normal;
font-style: normal;
}

#horizon a { font-family: Helvetica, Arial; font-size: 10pt; font-weight: bold; font-style: normal; text-decoration: none;}
#horizon a:link { color: #0D317D; } /* unvisited links */
#horizon a:visited { color: #0D317D; } /* visited links */
#horizon a:hover { color: #6787C2; } /* user hovers */
#horizon a:active { color: #6787C2; } /* active links */

#photos {
float:left;
width:173px;
margin-top:20px;
}

#bagence {
background-color: #0B3788;
background: url("images/bottombleucorpo.gif") bottom no-repeat;
float: left;
width: 100%;
}

#bagence p {
background-color: #0B3788;
color: #FFFFFF;
font-family: Helvetica, Arial;
font-size: 18px;
line-height: 95%;
text-align: center;
}



Merci

Vinix

Je m'excuse j'ai mis directement la feuille de style sur mon message.
Je n'ai pas bien l'habitude des forums.


Voici donc le lien de ma feuille de style.
http://ns32950.ovh.net/~immo/style.css

Vinix

Bonjour Vinix, tu peux sans problème mettre ta feuille de style dans le message, mis en la balisant avec les [ code] avant et [ /code] (sans les espaces) à la fin pour uns meilleure lisibilité.

N'hésites pas à éditer ton message initial.

Bon j'ai un truc a finir et je regarde ton problème après.
++
Aymeric
Modifié par AymericJ (19 May 2006 - 11:19)

Bon bon bon, on va essayer la formule magique qui semble bien fonctionner sur la copie de ta page que j'ai chez moi.

Tout en début de ton css :

*{
margin:0;
padding:0;
}

Pour rappel, cela attribue par defaut à tous tes éléments ces valeurs de page extérieure et intérieure, chaque élément garde par la suite les "réglages" que tu leur aura donné.

[EDIT] précision : cela permet de mettre à plat les marges par défaut qui sotn parfois légèrement différentes d'un navigateur à l'autre.

++
Aymeric, cette formuuulleee secrettteee elle est pour toi, c'est ta chanson porte bonheuuurrr!!

PS : ceux qui n'ont pas d'enfants qui regardent hamtaro le matin dans debout les zouzous ne peuvent pas comprendre ce qu'il y'a après mon nom.
Modifié par AymericJ (19 May 2006 - 11:33)

Bonjour ici,

Pour ma part, je pense que Vinix devrait d'abord penser au fait qu'il manque un DOCTYPE à son code: les navigateurs travaillent donc en mode de rendu natif (c'est à dire propriétaire : ils interprètent le code comme ils peuvent et pas en fonction d'un mode de conformité aux normes).

Vu qu'ils font tout à leur sauce, il ne faut pas leur demander d'afficher les pages de la même manière.
Le bon DOCTYPE permettrait de les faire basculer sur un mode de rendu standard. On peut en voir différents ici : http://pompage.net/pompe/doctype

Bon sayez j'ai pigé pour insérer le code et je penserai donc bien à mettre les balises code maintenant.
En effet, mon problème d'alignement en haut est réglé avec la formule magique

*{
margin:0;
padding:0;
}

Par contre, j'ai toujours le soucis de l'espacement au niveau des listes sur la colonne de gauche car c'est vraiment trop espacé sur Mozilla.


Vinix

neko a écrit :
Bonjour ici,

Pour ma part, je pense que Vinix devrait d'abord penser au fait qu'il manque un DOCTYPE à son code: les navigateurs travaillent donc en mode de rendu natif (c'est à dire propriétaire : ils interprètent le code comme ils peuvent et pas en fonction d'un mode de conformité aux normes).
...

Ca m'apprendra à ne regarder que le css.

En effet, j'ai oublié quelque chose d'important dans mon html !
Il va donc falloir que je revois la page car cela la modifie un peu.
Par contre, je ne pense pas que ce soit ça qui gênait mes puces.
Là, je travaille en local et je ne peux pas mettre tout de suite en ligne la page avec les modifs.

Merci

Vinix