[HTML] Bug sous firefox

**benji2642** · 05/04/2007, 11h50

Bonjour, je suis en train de créer un site web pour présenter mon projet,
mais j'ai un petit problème de mise en page semble-t-il avec firefox.

voici comment le site apparait sous firefox:

http://pierre.seve.free.fr/ff.jpg

et sous internet explorer et opera il n'y a pas de pb:

http://pierre.seve.free.fr/ie.jpg

Voici mon code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Welcome Design Group 4-8 Fokker F-27</title>
  <style type="text/css">
#header {
text-align:right;
height: 160px; width: 800px; font-size:12px; font-weight: bold;
background-image: url(pics/headergood5.jpg); }
#principal {
width: 800px;
background: #C6CBCE;
}
#contenu {
float: right;
width: 599px;
min-height: 600px;
_height:600px;
background: #FFFFFF;
margin-right:5px;
text-align: left;
}
/*Menu*/
#menu {
float: left;
width: 169px;
margin-top:25px;
margin-top:25px;
text-align: center;
}
.menu_top {
font-weight: bold;
text-align: center;
color: #FFFFFF;
background-image: url(pics/title3.jpg);
width: 169px;
height: 26px;
}
.menu {
width: 169px;
background: #FFFFFF;
text-align: left;
}
#footer {
text-align:center;
position: relative;
height: 40px;
width: 800px;
background-image: url(pics/footer5.jpg);
color:#F98000;}
  </style>
</head>
<body style="color: rgb(0, 0, 0);" alink="#ee0000"
 link="#0000ee" vlink="#551a8b">
<div style="background-color: rgb(255, 255, 204);" id="header"><br>
<br>
<br>
<br>
<br>
<span style="color: rgb(248, 140, 16);"><a
 style="color: rgb(248, 140, 16);" href="index.html">Homepage</a>
- <a style="color: rgb(248, 140, 16);"
 href="mailto:0404622s@student.gla.ac.uk">Contact</a></span>
&nbsp;
&nbsp;
</div>
<div id="principal">
<div id="menu">
<div class="menu_top">&nbsp;Homepage</div>
<div class="menu">&nbsp;<img src="puce.gif"
 alt="" title="">
<a href="intro.html">Introduction</a>
</div>
<div class="menu_top">&nbsp;Modifications</div>
<div class="menu">&nbsp;<img src="puce.gif"
 alt="" title="">
<a href="index2.html">Fuselage</a>
</div>
<div class="menu">&nbsp;<img src="puce.gif"
 alt="" title="">
<a href="wing.html">Wing</a>
</div>
<div class="menu">&nbsp;<img src="puce.gif"
 alt="" title="">
<a href="index3.html">Tail</a>
</div>
<div class="menu">&nbsp;<img src="puce.gif"
 alt="" title="">
<a href="prop.html">Propulsion</a>
</div>
<div class="menu">&nbsp;<img src="puce.gif"
 alt="" title="">
<a href="avionic.html">Avionics</a>
</div>
<div class="menu_top">&nbsp;Analysis</div>
<div class="menu">&nbsp;<img src="puce.gif"
 alt="" title="">
<a href="stability.html">Stability</a>
</div>
<div class="menu">&nbsp;<img src="puce.gif"
 alt="" title="">
<a href="cost.html">Costing</a>
</div>
<div class="menu_top">&nbsp;The Team</div>
<div class="menu">&nbsp;<img src="puce.gif"
 alt="" title="">
<a href="team.html">Meet the fokker</a>
</div>
<div class="menu_top">&nbsp;Download</div>
<div class="menu">&nbsp;<img src="puce.gif"
 alt="" title="">
<a href="report.doc">Christmas Report</a>
</div>
<div class="menu">&nbsp;<img src="puce.gif"
 alt="" title="">
<a href="finalreport.doc">Final Report</a>
</div>
</div>
<div id="contenu">
<div style="text-align: center;">
<h1>Welcome</h1>
</div>
<br>
<p style="text-align: center;"><img
 src="pics/fokker.jpg" alt="" title=""></p>
<br>
<p style="text-align: center; font-weight: bold;">AIRCRAFT
DESIGN FOR STATIC LONGITUDINAL STABILITY (STICK FIXED) USING
EMPERICALLY BASED TECHNIQUES<br>
<br>
</p>
</div>
<div id="footer"><small><strong>AEROSPACE
DESIGN PROJECT IV &copy; 2007 B.SEVE</strong>
</small></div>
</div>
</body>
</html>

Je ne sais pas trop d'où l'erreur peut venir, donc si vous avez des suggestions elles sont les bienvenues.

Merci d'avance
Ben.

**Bisûnûrs** · 05/04/2007, 14h36

Sans doute du fait qu'en HTML la hauteur des éléments comprenant des marges et des padings n'est pas calculée de la même manière :

- Sur Firefox, la marge vient s'ajouter
- Sur IE, la marge et comprise dans la hauteur

Utilise plutôt un DOCTYPE XHTML pour avoir le même rendu sur les deux navigateurs ...

**Candygirl** · 05/04/2007, 15h43

Hello,

ta différence de rendu entre opera et firefox provient vraisemblablement de ton doctype incomplet (il manque l'url). Modifie donc ton doctype comme suit:

Code html :

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

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

Revisualise ton site sous opera et firefox et tu devrais avoir le même rendu. Tu dois ensuite appliquer un clear à ton footer afin qu'il se positionne correctement au bas de tes 2 flottants et que le conteneur de couleur grise s'étendent bien jusqu'au bas:

Code css :

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