Prob d'affichage IE et Mozilla

**tsyfar** · 12/08/2005, 12h43

Bonjour,

J'ai créer un site internet, pas encore en ligne, avec du code XHTML, CSS et du javascript.
Tout fonctionne très bien sous internet explorer, par contre sous firefox, l'affichage ne va pas. On dirait que c'est le possitionnement qui n'est pas correcte car tout est décalé.
J'ai valider mon code XHTML et mon code CSS donc de se coté là, c'est bon.
Est-ce que qqu peut me dire pq? et comment corriger?
Y a-t-il un programme permettant de resoudre ca, comme un validateur de navigateur??? ;-))

Merci d'avance.

**v4np13** · 12/08/2005, 12h50

Il y a différentes choses qui pourraient être à l'origine du décalage IE/FF mais sans code ni appercu, on ne saurait pas t'aider...

**tsyfar** · 12/08/2005, 12h59

Voici mon 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
 
body
{
   width: 700px;
   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/vespafond_1024X768.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
   background-color: #333333;
   /*border: 1px solid white; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
 
/* L'en-tête */
 
#en_tete
{
   width: 800px;
   height: 200px;
   background-image: url("images/bannier800X200.jpg");
   background-repeat: no-repeat;
   margin-bottom: 10px;
   border: 1px solid white; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
 
#menu
{
   /*background-color: red;*/
   /*float : center; /* Le menu flottera à gauche */
   width : 800px; /* Très important : donner une taille au menu */
   height : 20px;
   border : 1px solid white;
}
 
#sous_menu
{
   /*background-color: #969696;*/
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-right: 0px; /* Une marge à droite */
   float: right; /* Le menu flottera à droite */
   width: 100px; /* Très important : donner une taille au menu */
   height: 88px;
   border: 0px solid white;
   padding: 1px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
}
 
#image_vertical
{
   width:  20px;
 
   float: right;
   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 */
   margin-right: -100px;
   background-image: url("images/bord1.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
   background-repeat: no-repeat;
   padding: 20px;
}
 
#animation a
{
   width:  200px;
   height: 139px;
   float: right;
   margin-right: -100px;
   background-image: url("images/vespaphoto.jpg");
   padding: 5px;
   margin-top: 330px;
   margin-bottom: 30px;
   background-repeat: no-repeat;
}
 
#animation a:hover
{
   width:  200px;
   height: 139px;
   float: right;
   margin-right: -100px;
   background-image: url("images/vespasurvole.jpg");
   padding: 5px;
   margin-top: 330px;
   margin-bottom: 30px;
   background-repeat: no-repeat;
}
 
#corps
{
   margin-left: 0px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-right: 100px; /* Une marge à droite 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 */
   color: white;
   /*background-color: #626262; /* Une couleur de fond pour le corps */
   /*background-image: url("images/motif.png");*/
   background-repeat: no-repeat; /* Une petite image de fond qui se répètera horizontalement en haut */
   /*border: 1px solid white; /* Une bordure pour bien marquer les limites du corps et pour faire joli */   
}
 
#image_horizontal
{
   width:  547px;
   height: 20px;
   /*float: bottom;*/
   /*padding: 20px;
   /*float: right;
   margin: auto; /* Pour centrer notre page */
   margin-top: -65px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 60px;    /* Idem pour le bas du navigateur */
   /*margin-right: -80px;*/
   background-image: url("images/bord2.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
   background-repeat: no-repeat;
}
 
#pied_de_page
{   
   width: 789px;
   height: 20px;
   padding: 5px;
   text-align: center;
   color: #FFCC99;
   /*background-color: #626262;*/
   /*background-image: url("images/motif.png");*/
   background-repeat: no-repeat;
   border: 1px solid white;
}
 
table
{
   margin: auto;
   border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
}
td
{
   border: 1px solid white;
   text-align: center;
   padding: 5px;
}
 
a:link, a:visited
{
   color: #FFCC99;
}

et voici par exemple la page de démarrage index.html:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur le site du Vespa Club de Donceel !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="VespaClubDonceel" href="design.css" />
   </head>
   <body>
		<div id="en_tete">
		   <!-- Ici on mettra la bannière -->
		</div>
	   <div id="menu">
			   <!-- Ici on mettra le menu -->
	            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="22" width="100"> 
	            	<param name="movie" value="boutons/BClub.swf" /> 
	            	<param name="quality" value="high" />
	            	<embed src="boutons/BClub.swf" quality="high" type="application/x-shockwave-flash" height="22" width="100" /> 
	            </object> 
	            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="22" width="100">
                  <param name="BGCOLOR" value="" />
                  <param name="movie" value="boutons/BPhotos.swf" />
                  <param name="quality" value="high" />
                  <embed src="boutons/BPhotos.swf" quality="high" type="application/x-shockwave-flash" height="22" width="100"></embed>
                </object> 
	            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="22" width="100"> 
		            <param name="movie" value="boutons/BNews.swf" />
		            <param name="quality" value="high" />
		            <embed src="boutons/BNews.swf"" quality="high" type="application/x-shockwave-flash" height="22" width="100" /> 
	            </object> 
	            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="22" width="100"> 
		            <param name="movie" value="boutons/BTechnique.swf" />
		            <param name="quality" value="high" />
		            <embed src="boutons/BTechnique.wf" quality="high" type="application/x-shockwave-flash" height="22" width="100" /> 
	            </object> 
	            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="22" width="100"> 
		            <param name="movie" value="boutons/BAchatVente.swf" />
		            <param name="quality" value="high" />
		            <embed src="boutons/BAchatVente.swf" quality="high" type="application/x-shockwave-flash" height="22" width="100" /> 
	            </object> 
	            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="22" width="100"> 
		            <param name="movie" value="boutons/BContact.swf" /> 
		            <param name="quality" value="high" />
		            <embed src="boutons/BContact.swf" quality="high" type="application/x-shockwave-flash" height="22" width="100" /> 
	            </object> 
	            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="22" width="100"> 
		            <param name="movie" value="boutons/BForum.swf" /> 
		            <param name="quality" value="high" />
		            <embed src="boutons/BForum.swf" quality="high" type="application/x-shockwave-flash" height="22" width="100" /> 
	            </object> 
	            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="22" width="100">
	              <param name="movie" value="boutons/BLiens.swf" />
	              <param name="quality" value="high" />
	              <embed src="boutons/BLiens.swf" quality="high" type="application/x-shockwave-flash" height="22" width="100"></embed>
	            </object>
   		</div>
 
		<div id="image_vertical">
		   <div style="height: 340px"></div>
		   <!-- Ici on mettra une image à droite-->		
		   <div id="sous_menu">
		   </div>   
		</div>
 
		<div id="animation">
		   <!-- Ici on mettra une animation -->
		   <a href="#"></a>
		</div>
 
		<div id="corps">
		   <!-- Ici on mettra le contenu principal de la page (tout le texte quoi) -->
		   <h2>LA RAISON D'ÊTRE DE NOTRE CLUB</h2>
 
           <p>Creé officiellement en 2003, le "Vespa Club Donceel" regroupe quelques passionnés du célèbre scooter italien de la marque Piaggio. 
           Apparu au lendemain de la seconde guerre mondiale à l'initiative de Enrico Piaggio et D'ascanio, 
           la Vespa devient rapidement un symbole de la reprise et de la reconversion  industrielle d'après guerre. 
           Caractérisé par son moteur en position arrière avec une transmission directe à la roue, 
           le scooter aux formes agressives et au large tablier fut appelé Vespa ("abeille" en italien) car il reprenait la morphologie de l'insecte.</p> 
 
		   <p>Désireux de faire partager notre passion et de faire vivre le mythe Vespa, 
		   nous avons mis en ligne un modeste site internet consacré à notre club. 
		   Réunissant plus d'une trentaine de membres et sans cesse en croissance, 
		   notre club organise régulièrement des balades, participe à des réunions et tente de fournir 
		   un réseau de soutien pour toute personne désireuse de restaurer une Vespa. 
		   Mais si notre club incarne bien ce nouvel engouement pour le design italien des années 50-60 et la nostalgie qu'il suscite, 
		   il est également là pour assurer la pérennité d'un mythe intemporel et quasiment universel.</p>
 
	       <p>Bonne visite sur notre site !!!!!</p>	       
		</div>
 
		<div id="image_horizontal">
		   <!-- Ici on mettra image en bas -->
		</div>
 
		<div id="pied_de_page">
		   <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
		   <p>Copyright "Vespa Club Donceel" 2005, tous droits réservés</p>
		</div>      
   </body>
</html>

[/url][/quote]

**v4np13** · 12/08/2005, 13h21

Je remarque déjà deux choses:

Le doctype est un peu violent, il ne sera pas pris en compte partout, donc ça pourrait expliquer des différences d'affichage entre différents navigateurs. Met un doctype pour le XHTML 1.0 traditional.

Ton image de fond (1024*786px) doit être lourde, donc le chargement de ta page sera ralenti (surtout pour ceux qui possède un 56k). Je te recommandera d'utiliser une petite image uniforme que tu répeterai sur toute ta page.

Les problèmes se trouvent où? (Pour le moment, je suis de retour sur le mac, carte mère HS sur le pc)

Prob d'affichage IE et Mozilla

HTML

Discussions similaires

Partager

Partager