[DHTML+CSS] Mauvais affichage sous firefox

**j14z** · 27/01/2006, 22h18

Salut la compagnie !

Je suis actuellement en train de créer un site Web visant à cataloguer du vin pour ma belle soeur. En le montrant à un ami, j'ai vu que sous firefox, tout est de travers.

Si vous avez ie et firefox je vous invite à comparer (le résultat désiré est celui de IE bien entendu

).

http://users.info.unicaen.fr/~jpierre/2006/vin/accueil.php

code de la page:

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
 
<body>
 <div id="overDiv" style="position:absolute; visibility:hide;"></div>
  <script language="JavaScript" src="./js/overlib.js"></script>
  <div id="all">
   <div id="Main">
    <div id="column2">
     <div id="column1">
      <div id="header"></div>
	   <div id="droite"></div>
		<div id="gauche">
		 <div id="menu"><a href="./accueil.php">Accueil</a><br />
			 <a href="./domaine.php">Le Domaine</a><br />
			 <a href="./vignoble.php">Le vignoble</a><br />
			 <a href="./vinification.php">Vinification</a><br />
			 <a href="degustation.php">D&eacute;guster un vin</a><br />
			 <a href="cave.php">Avoir une belle cave</a><br />
			 <a href="catalogue.php">Nos vins</a><br />
			 <a href="commander.php">Commander</a><br />
			 <a href="contact.php">Nous contacter</a><br />
		 </div>
		</div>
 
		<div id="contenu">
		 <div id="navbar">Vous &ecirc;tes ici: <a href="./accueil.php">accueil</a></div>
			<h1>Bienvenue!!!</h1>
			<br />
<?php
/*
Affichage des promos
*/
?>
  </center>
	 </div>
	 <div id="footer">Copyright &copy; xxx. Tous droits r&eacute;serv&eacute;s
	  <div id="footer_droit"></div>
	  <div id="footer_gauche"></div>
	 </div>
	</div><!-- column1-->
   </div><!-- column2-->
  </div>
 </div>
 </body>

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
 
body{
	background: url(../img/fond_body.gif);
	color: #000;
	font: 11px;
	font-family: "Bitstream Vera Sans",Verdana,Arial,Helvetica,sans-serif;
	margin-left:5px;
	margin-top:5px;
	MARGIN-RIGHT:0;
	}
 
div, table, td, tr{
	font: 10px;
}
 
a:link, a:visited {
	color: #999999;
	text-decoration: none;
	font: 13px Verdana;
	}
a:hover{
	color: #666666;
	text-decoration: underline;
	font: 13px Verdana;
	}
 
h1{
	text-align: center;
	font-family: "Bitstream Vera Sans",Verdana,Arial,Helvetica,sans-serif;
	}
h2{
	text-align: center;
	font-family: "Bitstream Vera Sans",Verdana,Arial,Helvetica,sans-serif;
	}
h3{
	text-align: center;
	font-family: "Bitstream Vera Sans",Verdana,Arial,Helvetica,sans-serif;
	}
 
table{
	text-align: center;
	}
 
 
/*****************************
*
*
Tags persos
*
*
******************************/
 
#all{
	width:100%;
	height:100%;
	text-align:center;
	padding:0;
	margin:0;
	}
 
#Main{
	width:760px;
	padding:0;
	margin:5px;
	}
 
#column2 {
    margin: 0;
    padding: 0;
	background: url(../img/fond_droite.gif) repeat-y;
    background-position: right;
    width: 100%;  
}
 
#column1 {
    margin: 0px;
    padding: 0px;
    background: url(../img/fond_item_menu.gif) repeat-y;
	background-position: left;
    width: 100%;   
} 
 
#gauche{
	float: left;
	width:120px;
	height: 100%;
	}
#header{
	width: 760px;
	height: 200px;
	background: url(../img/bandeau.gif);
	}
 
#menu {
	margin-top: 30px;
	margin-left: 5px;
	font: 13px Verdana;
	text-align: left;
	vertical-align: middle;
	}
 
#menu a:hover{
	font: 13px Verdana;
	text-decoration: underline overline;
	vertical-align: middle;
	}
 
#bourrage1_gauche{
	background: url(../img/fond_item_menu.gif);
	height: 80px;
	text-align: center;
	vertical-align: middle;
	font: 16px Verdana bolder #000;
	}
 
#titre_cat{
	margin: 10px;
	width: 95%;
	background: url(../img/fond_body.gif);
}
#bourrage2_gauche{
	background: url(../img/fond_item_menu.gif);
	}
 
#contenu{
	background: url(../img/fond_milieu.gif);
	height: 100%;
	width: 620px;
	vertical-align: top;
	text-align: left;
	}
 
#navbar{
	width:350px;
	background: url(../img/fond_body.gif);
	padding: 5px;
	height: 20px;
	margin-left:20px;
	margin-top:5px;
	text-align: left;
	color: black;
	}

Je pensais pourtant avoir respecté toutes les règles. Erf je suis dégouté

**marsupix** · 30/01/2006, 06h49

je comprend pas pourquoi un tel embriquement de div...
J'aurais fait simplement:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="conteneur">
 <div id="haut"></div>
 <div id="middle">
  <div id="menu">
   <a>...</a>
   ...
  </div>
  <div id="contenu">
   ...
  </div>
 </div>
 <div id="bas"></div>
</div>

avec #menu{ float:left; } et #menu a{ display:block; }
je te laisse voir le reste...

Envoyé par j14z

Je pensais pourtant avoir respecté toutes les règles. Erf je suis dégouté

justment si tu avait repsecté les standards l'affichage serait bon sou FF et mauvais sou IE

**Spack** · 30/01/2006, 18h02

Essaie d'abord de corriger les erreurs de ta pages ensuite regarde ce que ça donne...

Envoyé par marsupix

justment si tu avait repsecté les standards l'affichage serait bon sou FF et mauvais sou IE

+1
Il faut faire son design sous Firefox (plus respectueux des standards) et ajuster sous IE...

[DHTML+CSS] Mauvais affichage sous firefox

CSS

Vue hybride

Discussions similaires

Partager

Partager