Différences affichages firefox/IE

**Bluman** · 28/01/2009, 21h32

Bonjour,

je viens à vous pour la première fois, car j'ai un soucis de programmation en php, je pense que mon problème vient de là.. même si je m'attends à tout...

Bon voila j'ai créé un petit site et comme j'apporte encore pas mal de modification j'ai décidé d'utiliser un include pour le menu ainsi que pour la bannière en bas. Tout cela marche nickel sous firefox mais dès que je bascule sur internet explorer y a plus rien qui marche correctement... donc si l'un de vous à une idée...
je vous donne mes codes:

code html page principale avec les includes:

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
<!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" >
   <head>
       <title>Bienvenue sur le Site du BDA !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <!-- Auteur de la page -->
<meta name="author" content="InfoLhan" />
<!-- Description de la page -->
<meta name="description" content="Le site de l'association du Bureau Des Arts, de l'Ecole des Métiers de l'Environnement" />
<!-- Mots-clés de la page -->
<meta name="keywords" content="BDA, EME, Spectacle" />
<!-- Empêcher la mise en cache de la page par le navigateur -->
<meta http-equiv="pragma" content="no-cache" />
 
	   <link rel="stylesheet" media="screen" type="text/css" title="Apparence" href="design/apparence2.css" />
	   <link rel="shortcut icon" type="image/x-icon" href="images/haro.ico" />
	   <SCRIPT LANGUAGE="Javascript" SRC="design/montre.js"> </SCRIPT>
 
 
   </head>
   <body>
       <div id="en_tete">
   <!-- Ici on mettra la bannière -->
 
</div>
 
<div id="menu">
<?php
// Puis on inclut le menu
include("menu.php");
?>
 
</div>
 
 
<div id="corps">
   <!-- Ici on mettra le contenu principal de la page (tout le texte quoi) -->
 
   <p>
     page centrale
   </p>
 
</div>
 
<div id="pied_de_page">
 
   <?php
 
include("pied_de_page.php");
?>
</div>
 
   </body>
</html>

code du menu

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
<div id="menu">
 
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Accueil</dt>
			<dd id="smenu1"onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="index.html">Actualité</a></li>
           <li><a href="news.html">Dernières News</a></li>
           <li><a href="infos.html">Infos</a></li>
		   <li><a href="calendrier.html">Calendrier</a></li>
				</ul>
 
			</dd>
	</dl>
 
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">L'Assos</a></dt>
			<dd id="smenu2"onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="historique.html">Historique</a></li>
           <li><a href="photos.html">Photos</a></li>
           <li><a href="contact.html">Contact</a></li>
				</ul>
	</dl>
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Musique</dt>
			<dd id="smenu3"onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
				<ul>
 
					<li><a href="responsable_musique.html">Responsables</a></li>
           <li><a href="but_musique.html">Nos buts</a></li>
           <li><a href="moyen_musique.html">Nos moyens</a></li>
		   <li><a href="calendrier_musique.html">Horaires</a></li>
				</ul>
 
			</dd>
	</dl>
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Danse</dt>
			<dd id="smenu4"onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="construction.html">Lien</a></li>
           <li><a href="construction.html">Lien</a></li>
           <li><a href="construction.html">Lien</a></li>
				</ul>
			</dd>
	</dl>
	<dl>			
		<dt onmouseover="javascript:montre('smenu5');">Spectacle</dt>
			<dd id="smenu5"onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="partenariat.html">Partenariat</a></li>
           <li><a href="programmation.html">Programmation</a></li>
				</ul>
 
			</dd>
	</dl>
	<dl>			
		<dt onmouseover="javascript:montre('smenu6');">Souvenirs</dt>
			<dd id="smenu6"onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="gala2007.html">Gala2007</a></li>
           <li><a href="spectacle_cabaret.html">Spectacle Cabaret 2008</a></li>
           <li><a href="construction.html">Lien</a></li>
				</ul>
 
			</dd>
	</dl>
</div>

code du javascript du menu au (cas où mais je ne pense pas que le problème vien de là

Code :

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

1
2
3
4
5
6
7
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}

et code du css associé

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
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
body
{
   width: 100%;
   margin: auto; /* Pour centrer notre page */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
   background-image: url("../images/fond_bas2.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
   background-position: center;
       background-repeat: repeat-y;
	   background-color: #a20c0b;
 
}
 
#en_tete
{
   width: 944px;
   height: 115px;
   margin: auto; /* Pour centrer notre page */
   background-image: url("../images/banniere.jpg");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
#corps
{
margin-left: 185px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   width: 70%;
   font-family: "Times New Roman", Times, serif;
   color: black;
   background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
    border: none
}
 
#pied_de_page
{
margin-left: 185px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
	width: 800px;
   height: 100px;
   margin: auto;
font-size: small;
 
}
 
#pied_de_page a
{
 text-decoration: none;
 
}
 
.post_it
{
width: 70%;
   margin: auto; /* Pour centrer notre page */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   text-align: center;
   margin-left: 150px;
   margin-bottom: 20px;
   border: none;
   }
 
   #construction
{
width: 70%;
   margin: auto; /* Pour centrer notre page */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-left: 150px;
   margin-bottom: 20px;
   }
 
  #gala
{  
   font-family: "Arial Black", Arial, Verdana, serif;
	font-size: x-large;
	color: green;
	text-align: center;
 
	}
 
 
	#historique
	{
	text-align: justify;
	font-size: large;
	text-indent: 15px;
	color: #1339fc;
	text-align: justify;
	}
 
	#affiche
	{
		width: 150px;
 
		}
 
	#photo
	{
	text-align: center;
	}
 
	caption /* Titre du tableau */
{
   margin: auto; /* Centre le titre du tableau */
   font-family: Arial, Times, "Times New Roman", serif;
   font-weight: bold;
   font-size: 1.2em;
   color: #009900;
   margin-bottom: 20px; /* Pour éviter que le titre ne soit trop collé au tableau en-dessous */
}
 
table /* Le tableau en lui-même */
{
   margin: auto; /* Centre le tableau */
   border: 4px outset green; /* Bordure du tableau avec effet 3D (outset) */
   border-collapse: collapse; /* Colle les bordures entre elles */
}
 
th /* Les cellules d'en-tête */
{
   background-color: #006600;
   color: white;
   font-size: 1.1em;
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}
 
td /* Les cellules normales */
{
   border: 1px solid black;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
}
 
table#spectacle
{
width:70%;
}
 
table#spectacle th
 {
    background-color: #006600;
   color: white;
   font-size: 1.1em;
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
	}
 
table#spectacle td /* Les cellules normales */
{
   border: 1px solid black;
   font-size: 0.8em;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   text-align: justify; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
}
 
 
table#spectacle2
{
width:70%;
}
 
table#spectacle2 th
 {
    background-color: #bd9cde;
   color: white;
   font-size: 1.1em;
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
	}
 
table#spectacle2 td /* Les cellules normales */
{
   border: 1px solid black;
   font-size: 0.8em;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   text-align: justify; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
 
 }
 
 /*début menu*/
 
 dl, dt, dd, ul, li {
margin: 0;
padding: 5px; /*a revoir*/
list-style-type: none;
}
#menu {
position: absolute;
top: 100px;
left: 0;
/*z-index:100;
width: 100%; /* precision for Opera */*/
}
#menu dl {
float: left;
width: 10em;/*taille larguer menu*/
}
#menu dt {
cursor: pointer;
font-family: Arial, Times, "Times New Roman", serif;
   font-size: 1.4em;
text-align: center;
font-weight: bold;
color: white;
background: #009900;
border: 1px solid black;
 -moz-border-radius:25px; /*le rayon du bord arrondi - pour mozilla */
-webkit-border-radius:25px;
margin-top: 15px;
 
}
#menu dd {
display: none;
position: absolute;
z-index: 200;
margin-top: -1.4em;
width: 10em;
border: 0px solid black;
left: 8em;
margin-top: -1.4em;
width: 10em;
 
   font-size: 1.2em;
   font-family: Arial, Times, "Times New Roman", serif; /* menu déroulanr*/
}
#menu li {
text-align: center;
background: #009900;
   -moz-border-radius:15px; /*le rayon du bord arrondi - pour mozilla */
-webkit-border-radius:15px;
border: 1px solid black;
margin-top: 5px;
 
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
color: white;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #42aaa3;
}

voila donc ça fait plusieurs jour que je m'arrache les cheveux alors que si il faut la solutions et toute simple... merci de votre attention et désolé pour tout ce code

**delete** · 29/01/2009, 00h10

Tu indiques ;

Code :

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Il suffit d'un caractère avant le '<!DOCTYPE' et MSIE est perdu

. Et plus rien n'est normal.

As tu vérifié cela ?

Vérifie également la fermeture de tes commentaire dans le CSS (/* xxx */), j'ai vu des doublons.

FoxLeRenard · 29/01/2009, 01h14

Salut, je viens de tout remonter sur mon micro avec IE7

Mis a part qu'il y a semblet' il plussieurs fermetures de HTML ET BODY ??
Tout marche trés bien, j'ais le menu en vert a gauche et les sousmenus se placent bien !

Aucun message d'erreur ?

Alors dis nous en d'avantage

**Bluman** · 29/01/2009, 11h37

tout d'abord merci beaucoup de vos réponses:

alors pour répondre aux questions:
-non je n'ai rien avant le <!DOCTYPE... je vous ai volontairement donné les docs tels quels

- pour la fiche css, je la tourne et la retourne et ne trouve pas l'erreur

-c'est pourquoi j'ai pensé que ça venait du PHP, je débute dedans et j'ai quelques doute pour faire simple voici ce que ça me donne sous firefox

et sous internet explorer

**Bluman** · 29/01/2009, 15h18

bon je préviens ce n'est pas up, mon problème est en parti résolu.. il semblerait que le problème venait de mon hébergeur, mais il me reste encore un souci, sous firefox tout est nickel, sous IE par contre mes menus disparaissent trop vite et parfois tout seul donc très difficile de cliquer sur un lien.

Si vous avez soit des idées du pourquoi du comment, soit un moyen de mettre un delay sur le onemouseout.... je suis tout ouïe

**delete** · 29/01/2009, 23h06

Procède par élimination car ton code CSS n'est pas très académique ..

Eg:

/*z-index:100;
width: 100%; /* precision for Opera */*/

Les hacks ne sont pas forcément des solutions, juste des paliatifs...

Utiliser Web Developper Toolbar & le Validateur W3C...

**Bluman** · 29/01/2009, 23h36

Bonjour et merci de ta réponse mais ça en fait je l'ai corrigé, j'avoue ne pas l'avoir reporté en haut mais finalement cette partie de m'a pas servie donc je l'ai enlevée

Différences affichages firefox/IE

HTML

Discussions similaires

Partager

Partager