[XHTML] Problème affichage différent sur Internet Explorer et FireFox
Bonjour à tous et à toutes.
Je suis tout nouveau sur le forum et depuis peu j'essai d'abandonner mes bonnes vieilles mises en pages à base de tableaux pour quelques choses de plus .
Mais comme tout bon débutant, j'ai souvent des problèmes que j'ai du mal à résoudre.
Alors en général, je déteste solliciter de l'aide car je préfère me débrouiller mais je dois dire que là je ne comprend pas, la page en question s'affiche correctement sous Internet Explorer mais n'est pas exactement comme je le voudrai sous FireFox.
Voici le code (x)html :
Code:
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
|
<!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>http://www.puziakart.net - Bienvenue - Welcome</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design general" href="general.css" />
</head>
<body>
<div id="haut_page"></div>
<div id="corps">
<div id="banniere"></div>
<div id="corps_lastadd"></div>
<div id="corps_menu">
<div class="bloc_menu"><img src="bouton_menu.jpg" /></div>
<div class="bloc_menu"><img src="bouton_menu.jpg" /></div>
<div class="bloc_menu"><img src="bouton_menu.jpg" /></div>
<div class="bloc_menu"><img src="bouton_menu.jpg" /></div>
<div class="bloc_menu"><img src="bouton_menu.jpg" /></div>
<div class="bloc_menu"><img src="bouton_menu.jpg" /></div>
<div class="bloc_menu"><img src="bouton_menu.jpg" /></div>
<div class="bloc_menu"><img src="bouton_menu.jpg" /></div>
</div>
<div id="cadres_r">
<div id="haut_infos"><p class="titre">Informations</p></div>
<div id="corps_infos"><br /><br /><br /></div>
<div id="pied_infos"></div>
</div>
<div id="cadres_r">
<div id="haut_cadre_r"></div>
</div>
<br />
</div>
<div id="pied_page"></div>
</body>
</html> |
Et voici mon Css :
Code:
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
|
body {
font-size: 12px;
background: url("back.jpg") repeat;
color: #111111;
line-height: 18px;
font-family: Arial, Verdana, sans-serif
}
#haut_page {
width: 780px;
height: 14px;
background-image: url("haut.jpg");
background-repeat: no-repeat;
margin: -1px auto;
}
#corps {
background: url("fond_cont.jpg") #7b819a repeat-y;
margin: 0px auto;
width: 780px;
}
#corps_lastadd {
margin-right: 20px;
margin-left: 20px;
width: 740px;
height: 90px;
background-image: url("fond_corp2.jpg");
background-repeat: no-repeat;
margin-bottom: 5px;
}
#corps_menu {
margin-right: 20px;
margin-left: 20px;
width: 740px;
height: 22px;
background-image: url("fond_menu.jpg");
background-repeat: no-repeat;
margin-bottom: 5px;
}
#haut_infos {
margin-left: 20px;
width: 565px;
height: 17px;
background-image: url("haut_cadre.jpg");
background-repeat: no-repeat;
}
#corps_infos {
margin-left: 20px;
width: 565px;
background-image: url("fond_cadre.jpg");
background-repeat: repeat-y;
}
#pied_infos {
margin-left: 20px;
width: 565px;
height: 10px;
background-image: url("bas_cadre.jpg");
background-repeat: no-repeat;
}
#haut_cadre_r {
width: 169px;
height: 17px;
background-image: url("haut_cadre_r.jpg");
background-repeat: no-repeat;
}
#cadres_r {
float: left;
}
.bloc_menu {
float: left;
width: 84px;
height: 14px;
margin-left: 2px;
margin-top: 4px;
}
#banniere {
margin-right: 20px;
margin-left: 20px;
width: 740px;
height: 150px;
background-image: url("banniere_haut.jpg");
background-repeat: no-repeat;
margin-bottom: 5px;
}
#pied_page {
width: 780px;
height: 35px;
background-image: url("pied_page.jpg");
background-repeat: no-repeat;
margin: 0px auto;
}
.titre {
color: white;
font-size: 12px; line-height: normal; font-family: Verdana;
margin-left: 20px;
} |
Pour être plus clair, le problème se situe au niveau des blocs ayant l'id "cadre_r".
Je voudrai qu'ils se trouvent l'un à côté de l'autre et bien évidemment alignés. Alors sous Internet Explorer pas de problème, mais sous FireFox le bloc de gauche passse au dessus de mon pied de page (commme s'il était devenu indépendant de tout et en dehors de mon corps) et celui de droite est bien à côté mais légerement plus haut. (il n'est pas bien aligné)
Merci d'avançe à tous ceux qui prendront le temps de me lire et d'éventuellement m'aider à avançer ! :)
Bonne journée.
Cyrille. :)
