Affichage IE:OK , FF: KO

**gids01** · 08/02/2007, 16h01

Bonjour,

J'ai réalisé un site qui s'affiche très bien sous IE par contre sous FF il y a des problèmes. Les zones ne sont pas centrées et le texte sort des zones.
J'ai mis une image pour mieux comprendre.

Voici la css:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
/* CSS Document */
 
body{
font-family:Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align:center;
background-color:#d8d8d8;
}
 
 
/* Zone de placement */
.page{
width: 780px;
align:center;
margin-left:auto;
margin-right:auto;
}
 
.titre{
width: 780px;
height: 150px;
text-align:left;
background-image : url(images/page_Titre2.png) ;
}
 
.menuZone{
width:780px;
height:50px;
text-align:left;
background-image : url(images/page_corps.png) ;
}
 
.corps{
width: 780px;
height:300px;
text-align:center;
background-image : url(images/page_corps.png) ;
}
 
.finPage{
width:780px;
height:50px;
align:center;
background-image : url(images/page_corps.png) ;
float:left;
}
 
.copyright{
width:780px;
height:50px;
text-align:center;
font-size:12px;
font-style:italic;
background-image : url(images/page_bas.png) ;
background-repeat: no-repeat;
}
 
.gauche{
width:180px;
float:left;
text-align:left;
}
 
.droite{
width:600px;
text-align:left;
float:left;
}
 
.droiteCorps{
width:600px;
padding-left:40px;
padding-right:40px;
padding-top:10px;
float:left;
background-image : url(images/titre_Droite2.png);
background-repeat: no-repeat;
}
 
.droiteCorpsNews{
width:600px;
float:left;
padding-top:10px;
background-image : url(images/titre_Droite2.png);
background-repeat: no-repeat;
}
 
.droiteImage{
text-align:center;
}
 
.evenementHaut{
width:180px;
height:59px;
background-image : url(images/evenement_haut.png) ;
background-repeat: no-repeat;
}
 
.evenementCorps{
width:180px;
background-image : url(images/evenement_corps.png) ;
padding-left:15px;
padding-top:10px;
}
 
.evenementBas{
width:180px;
height:23px;
background-image : url(images/evenement_bas.png) ;
background-repeat: no-repeat;
}
 
.sponsorHaut{
width:180px;
height:20px;
background-image : url(images/sponsors_haut.png) ;
}
 
.sponsorCorps{
width:180px;
padding-top:7px;
padding-left:7px;
text-align:center;
background-image : url(images/sponsors_corps.png) ;
}
 
.sponsorBas{
width:180px;
height:20px;
background-image : url(images/sponsors_bas.png) ;
}
 
.newsHaut{
width:600px;
height:45px;
background-image : url(images/news_haut.png) ;
padding-top:20px;
padding-left:60px;
}
 
.newsCorps{
width:600px;
padding-left:80px;
padding-top:10px;
background-image : url(images/news_corps.png) ;
}
 
.newsBas{
width:600px;
height:30px;
background-image : url(images/news_bas.png) ;
}
 
.monoHaut{
width:600px;
height:26px;
padding-left:60px;
background-image : url(images/moniteur_haut.png) ;
}
 
.monoCorps{
width:600px;
padding-left:60px;
background-image : url(images/moniteur_corps.png) ;
}
 
.monoBas{
width:600px;
height:25px;
background-image : url(images/moniteur_bas.png) ;
}
 
 
 
/* Texte */
#texteEvenement{
font-size:12px;
}
 
#texteCopyright{
font-size:12px;
font-style:italic;
}
 
#texteTitreCorps{
font-size:20px;
color:blue;
font-style:italic;
text-align:center;
}
 
#texteCorps{
font-size:12px;
text-align:justify;
}
 
#majuscule{
font-color:blue;
font-variant:small-caps;
font-size:14px;
}
 
#majuscule2{
font-color:blue;
font-variant:small-caps;
font-size:18px;
}
 
 
#titreNews{
font-size:13px;
color:blue;
}

et le code la page si jamais:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
<!--
/******** Feuille de styles du menu ************/
.menu{
 float: left;
 margin: 2px;
 margin-left:12px;
 padding: 2px;
 font-size:13px;
 font-family:Tahoma, Verdana, Arial;
 border:0px;
}
 
.titreMenu, .contenuMenu, .lienMenu{
 color: blue;
}
 
.titreMenu, .contenuMenu{
 border: 1px  outset blue;
 width: 110px;
 text-align: center;
 margin: 0px;
 padding: 0px;
}
 
.contenuMenu{
 display: none;
 position: absolute;
 background-color: #FFFFFF;
}
 
.menuOverflow{
 overflow: auto;
 height: 150px;
}
 
.itemOver{
 background-color: #AAAAFF;
}
 
.itemOut{
 background-color: #d8d8d8;
}
 
.lienMenu{
 text-decoration: none;
}
 
.crlf{
 clear: both;
 /*visibility: hidden;*/
}
 
/******** Fin de la feuille de styles du menu ************/
//-->
</style>
<script type="text/javascript">
<!--
/******** Debut du script du menu ************/
var timer = null;
var objOut = null;
 
function mouseOut(obj)
{
   var elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "none";
 
   document.getElementById(obj.id+"Titre").className="titreMenu itemOut";
 
   //instruction a placer a la fin de la fonction
   timer = null;
}
 
function fout(obj)
{
   objOut = obj;
   if (timer==null)
   {
      timer = setTimeout("mouseOut(objOut)","10");
   }
}
 
 
function fover(obj)
{
   var elmt;
   clearTimeout(timer);
   timer = null;
 
   elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "block";
 
   document.getElementById(obj.id+"Titre").className="titreMenu itemOver";
 
   if (objOut!=obj && objOut!=null)
   {
      mouseOut(objOut);
   }
}
/******** Fin du script du menu ************/
//-->
</script>
 
</head>
 
<body>
<div class="page"> 
  <div class="titre"></div>
  <div class="menuZone">
 <!-- Debut code HTML du menu -->
<!-- Debut Menu 1 -->
<div class="menu" id="Menu1" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu1Titre"><a href="accueil.html" class="lienMenu">Accueil</a></div> 
</div>
<!-- Fin Menu 1 -->
<!-- Debut Menu 2 -->
<div class="menu" id="Menu2" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu2Titre"><a href="#" class="lienMenu">Le club</a></div>
 
  <div class="contenuMenu" id="Menu2Item">
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="historique.html" class="lienMenu">Historique</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="organisation.html" class="lienMenu">Organisation</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="tarifs.html" class="lienMenu">Tarifs</a></div>
  </div>
 
</div>
<!-- Fin Menu 2 -->
<!-- Debut Menu 3 -->
<div class="menu" id="Menu3" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu2Titre"><a href="#" class="lienMenu">Ski et Snow</a></div>
 
  <div class="contenuMenu" id="Menu3Item">
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="moniteurs.html" class="lienMenu">Moniteurs</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="ecoleSki.html" class="lienMenu">Ecole de ski</a></div>
  </div>
 
</div>
<!-- Debut Menu 4 -->
<div class="menu" id="Menu4" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu1Titre"><a href="agenda.html" class="lienMenu">Agenda</a></div> 
</div>
<!-- Fin Menu 4 -->
<!-- Debut Menu 5 -->
<div class="menu" id="Menu5" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu1Titre"><a href="galerie.html" class="lienMenu">Galerie photos</a></div> 
</div>
<!-- Fin Menu 5 -->
<!-- Debut Menu 6 -->
<div class="menu" id="Menu6" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu2Titre"><a href="#" class="lienMenu">Inscriptions</a></div>
 
  <div class="contenuMenu" id="Menu6Item">
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="inscription.html" class="lienMenu">Club</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="inscription_sortie.html" class="lienMenu">Leysin</a></div>
 
  </div>
 
</div>
<div><br /><br /></div>
<hr class="crlf" />
<!-- Fin code HTML du menu --> 
</div>
  <div class="corps"> 
    <div class="gauche"> 
      <div id="texteEvenement"> 
        <div class="evenementHaut"></div>
        <div class="evenementCorps"> <strong>24-25.02.2007</strong> <br>
          &nbsp;&nbsp; Sortie &agrave; Leysin <br>
          <br>
          <strong>03.03.2007</strong> <br>
          &nbsp;&nbsp; Sortie OJ aux Savagnières</div>
        <div class="evenementBas"></div>
      </div>
      <div class="sponsorHaut"></div>
      <div class="sponsorCorps"><a href="http://www.novicar.ch" target="blank"><img src="images/novicar.png" alt="Novicar" border="0"/></a><br>
        <br>
        <a href="http://www.les-cj.ch" target="blank"><img src="images/cj.png" alt="Chemins de fer du Jura" border="0"/></a></div>
      <div class="sponsorBas"></div>
     <div id="texteEvenement"> 
		<div class="sponsorHaut"></div>
		<div class="sponsorCorps">Nombre de visites depuis le 01.02.07 :<br>
          <br>
			<script type="text/javascript" language="javascript" src="http://www.i-services.net/membres/compteur/compteur.php?user=101216&idcpt=81707&cache=0&read_only=0"></script></div>
		<div class="sponsorBas"></div>
	</div>
	</div>
    <div class="droite">
		<div class="droiteCorpsNews">
 
        <div id="texteTitreCorps">Accueil</div><br>
 
        <div class="newsHaut">
          <div id="titreNews"><strong>06.02.07</strong> : Camp de No&euml;l &agrave; 
            Warth</div>
        </div>
			<div id="texteEvenement">
				<div class="newsCorps">
				Les photos du camp de Noël sont disponibles dès à présent en cliquant ICI !
				</div>
			</div>
			<div class="newsBas"></div>
 
 
 
 
        </div>
		</div>
	</div>
  </div> 
 
  <div class="copyright">
 
  </div>
 
</div>
</body>
</html>

Merci pour votre aide

**Dan_A** · 08/02/2007, 16h20

align:center; n'existe pas en css et la coloration syntaxique le montre (firefox est très sensible à la syntaxe et c'est pourquoi il faut valider l'html puis css avant toute chose).
Je ne vois pas le lien vers la feuille de style dans l'html.
Un lien vers la page corrigée serait un moyen d'obtenir une réponse.

**gids01** · 08/02/2007, 19h27

J'ai fait les modifications, mais le problème n'est pas résolu.

J'ai enlevé align:center. Le lien sur la css est présent mais je ne l'avais pas copié.

**gids01** · 08/02/2007, 19h48

Comment puis-je faire valider mon code html et css?

**Dan_A** · 08/02/2007, 21h28

HTML
http://validator.w3.org/
puis CSS
http://jigsaw.w3.org/css-validator/
Cela ne réglera pas forcément les problèmes mais cela permettra d'être sûr que ce n'est pas un problème de syntaxe.
Un lien vers la page ou le code (réduit à un "test case") est l'étape suivante.

Affichage IE:OK , FF: KO

CSS

Vue hybride

Discussions similaires

Partager

Partager