[XHTML] Problème affichage différent sur Internet Explorer et FireFox

**espaladito** · 22/09/2006, 14h17

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 :

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
 
<!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 :

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
 
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.

**MasterOfChakhaL** · 22/09/2006, 15h02

tu as des id multiples...

tu devrais utiliser des classes dans ton cas

**ilood** · 22/09/2006, 15h10

Salut

MasterOfChakhaL a raison, valide tes pages (x)html avant de te lancer dans le css.

Un id ne peut être utilisé qu'une seule fois dans une page.

Enfin, pour ton problème, si tu ajoutes un clear both au pied de page tu devrais voir une amélioration

Code :

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

1
2
3
4
5
6
7
8
#pied_page {
        width: 780px;
        height: 35px;
        background-image: url("pied_page.jpg");
        background-repeat: no-repeat;
        margin: 0px auto;
        clear: both;
}

**espaladito** · 22/09/2006, 16h22

Bonjour à vous deux et merci d'avoir pris quelques minutes pour me répondre.

Alors pour ce qui de l'id qui revient deux fois c'est ma faute, c'était quand je testais diverses solutions mais depuis j'ai enlevé le second id. (le second "cadre_r")

Mais evidemment cela ne change rien, même si je laisse les deux et que je passe l'id en class.

Pour ce qui est de

Code :

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

1
2
 
clear: both;

Après quelques recherches j'avais éssayé de la placer, alors effectivement ca me met mon pied de page en dessous mais le corps ne s'allonge pas comme il devrait le faire. (toujours comme si le bloc information n'était pas dedans en faite)

Si quelqu'un à d'autres idées ou conseils, je suis ouvert à tous vu que je n'avançe plus mdr.

En tous les cas encore merci à vous !

**espaladito** · 22/09/2006, 18h05

Bon et bien finalement le problème est résolu, j'ai inclus le pied d epage dans le corps et le petit décalage était du à la balise de paragraphe.

Donc c'est résolu. (pour le moment en tout cas lol)

[XHTML] Problème affichage différent sur Internet Explorer et FireFox

HTML

Discussions similaires

Partager

Partager