[Aide] Décalage sous Mozilla Firefox

**PiouPiou83** · 10/06/2008, 15h49

Bonjour,
J'ai un petit soucis avec le codage de mon site. Tout s'affiche très bien sous Internet Explorer, mais lorsque je passe sous Mozilla Firefox, tout le contenu est décalé de plusieurs pixels.
Si vous voulez voir par vous-même directement en ligne, c'est par ici.

Mon codage est en div, avec uniquement ma page index et ma feuille de style CSS.
Voici le code de la page index :

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
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>BritneyMedias - Votre meilleure source fran&ccedil;aise sur Britney Spears</title>
</head>
 
<body>
 
<div class="leblocheader"> 
  <div align="right"><img src="design/images/1_02.gif" width="651" height="305" border="0" usemap="#Map" class="arbre">
      <map name="Map">
        <area shape="rect" coords="37,181,110,208" href="http://perfect-bliss.net" target="_blank">
      </map>
  </img></div>
 
</div>
 
<div class="lebloccontenu">
  <table width="100%" border="0" cellspacing="0">
    <tr>
      <td width="28%" height="328" valign="top" class="content_main"><table width="100%" border="0" cellspacing="0">
        <tr>
          <td><div align="center"><img src="design/menu/welcome.jpg" width="153" height="35"></div></td>
        </tr>
      </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td class="content_main">Bienvenue sur <strong>BritneyMedias</strong>, votre meilleure source sur la l&eacute;gendaire Miss Britney Spears. <u>Suivez son actualit&eacute;</u> jour apr&egrave;s jour avec infos, photos et vid&eacute;os. Passez une bonne visite sur le site. </td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td><div align="center"><img src="design/menu/navigation.jpg" width="153" height="35"></div></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td class="menu"><a href="#" class="menu">Accueil</a></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td class="menu"><a href="#" class="menu">Britney Spears </a></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td class="menu"><a href="#" class="menu">Galerie Photos </a></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td class="menu"><a href="#" class="menu">Multimedias</a></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td class="menu"><a href="#" class="menu">Site / Internet </a></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td><div align="center"><img src="design/menu/lastpictures.jpg" width="153" height="35"></div></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td><div align="center"><a href="http://www.britneyspearsgalerie.com/thumbnails.php?album=932" target="_blank"><img src="design/index/lastpic1.jpg" alt="Anniversaire de Christian Audigier" width="153" height="83" border="0"></a></div></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td><div align="center"><a href="http://britneyspearsgalerie.com/thumbnails.php?album=733" target="_blank"><img src="design/index/lastpic2.jpg" alt="Babyshower de Jamie-Lynn" width="153" height="83" border="0"></a><br>
              <span class="content_main"><a href="http://britneyspearsgalerie.com/thumbnails.php?album=lastup&cat=0" target="_blank">Voir les derniers ajouts ?</a></span> </div></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td><div align="center"><img src="design/menu/downloadcenter.jpg" width="153" height="35"></div></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td><div align="center"><a href="http://britneymedias.com/downloadcenter/" target="_blank"><img src="design/index/downloadcenter.jpg" alt="Acc&eacute;der au Download Center ?" width="153" height="83" border="0"></a></div></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td><div align="center"><img src="design/menu/tag.jpg" width="153" height="35"></div></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td class="content_main">Tag &agrave; placer ici </td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td><div align="center"><img src="design/menu/projets.jpg" width="153" height="35"></div></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td width="11%" class="content_main">&nbsp;</td>
            <td width="89%" class="content_main"><div align="left"><strong>BLACKOUT</strong><br>
              Genre : Album<br>
              Sortie : 30 Octobre 2007<br>
              Ventes : Plus de 2 millions
</div></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td width="11%" class="content_main">&nbsp;</td>
            <td width="89%" class="content_main"><div align="left"><strong>BLACKOUT - REEDITION </strong><br>
              Genre : Album<br>
              Sortie : 28 Octobre 2008</div></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <td><div align="center"><img src="design/menu/top.jpg" width="153" height="35"></div></td>
          </tr>
        </table>
        <br></td>
      <td width="72%">&nbsp;</td>
    </tr>
  </table>
</div>
</div>

Et voici la feuille de style 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
body {
margin: 0;
font-family: verdana, arial, sans-serif;
font-size: 75%;
background-image:url(design/images/1_01.gif);
text-align:center;
}
 
.global {
width: 700px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
} 
 
.leblocheader {
width:600px;
background-image:url(design/images/1_05.gif);
border-left:#FFFFFF 3px solid;
border-right:#FFFFFF 3px solid;
}
 
.lebloccontenu {
background-image:url(design/images/1_08.gif);
margin-top:0px;
width: 657px;
margin-right:173px;
float:right;
border-left:#FFFFFF 3px solid;
border-right:#FFFFFF 3px solid;
}

Merci beaucoup aux personnes qui pourront trouver la solution à mon problème

**Er3van** · 10/06/2008, 16h16

Bon, je t'annonce la couleur, tu vas souffrir pour faire les correctifs....

....pour IE

Oui, pour IE, et FF aussi.

En fait, tu n'as pas mis de Doctype, et du coup, tu bascules en mode quirk, mode avec lequel le modèle de boite est le modèle microsoft.
Du coup, la propriété width correspond à la largeur apparente de la boite, alors qu'elle devrait correspondre à la largeur du contenu, la largeur apparente s'obtenant en faisant la somme de la largeur du contenu, les padding et bordures.

Ajoute un Doctype, par exemple

Code HTML :

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

1
2
3
4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">

en première ligne de ta page HTML.

Après tu verras surement venir d'autres problèmes, et ce, sur IE et FF.

Mets déjà le Doctype et tiens nous au courant des soucis rencontrés

**PiouPiou83** · 10/06/2008, 16h33

Merci pour ta réponse.
J'ai ajouté le code, et effectivement, maintenant c'est aussi décalé sur Explorer.
Si tu pouvais m'aider pour les modifications afin que ce ne soit plus décalé ni sur Explorer ni sur Firefox, ce serait génial.

**Er3van** · 10/06/2008, 16h46

Pour que je puisse t'aider effecicacement, il faudrait que tu sépares tes couches structure/mise en forme.

La structure est assurée par le HTML, et la mise en forme par le CSS.
Ainsi, il ne doit pas y avoir d'attribut de couleur, de largeur, de margin ou encore de padding dans les balises de table en HTML.

Sinon, je vois un </div> qui se ferme en plein milieu d'une table, d'où vient-il ?

De même, un </div> à la fin, qui semblerait indiqué qu'il s'agit de la fin de ton .global, mais je ne vois pas le début de celui-ci dans le code...

Sinon, vu que .global, et tes blocs sont uniques dans la page, tu peux utiliser des id (#) à la place des classes, mais c'est uniquement d'un point de vue sémantique.

**PiouPiou83** · 10/06/2008, 19h22

J'ai enlevé tous les attributs dans les tables et les div qui coinçaient...
Je te redonne le code de la page index :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>BritneyMedias - Votre meilleure source fran&ccedil;aise sur Britney Spears</title>
</head>
 
<body>
 
<div class="leblocheader"> 
  <div align="right"><img src="design/images/1_02.gif" width="651" height="305" border="0" usemap="#Map" class="arbre">
      <map name="Map">
        <area shape="rect" coords="37,181,110,208" href="http://perfect-bliss.net" target="_blank">
      </map>
  </img></div>
 
</div>
 
<div class="lebloccontenu">
  <table border="0" cellspacing="0">
    <tr>
      <td width="24%" height="328" valign="top" class="content_main"><table border="0" cellspacing="0">
        <tr>
          <td><img src="design/menu/welcome.jpg" width="153" height="35"></td>
        </tr>
      </table>
        <table border="0" cellspacing="0">
          <tr>
            <td class="content_main">Bienvenue sur <strong>BritneyMedias</strong>, votre meilleure source sur la l&eacute;gendaire Miss Britney Spears. <u>Suivez son actualit&eacute;</u> jour apr&egrave;s jour avec infos, photos et vid&eacute;os. Passez une bonne visite sur le site. </td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td><img src="design/menu/navigation.jpg" width="153" height="35"></td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td class="menu"><a href="#" class="menu">Accueil</a></td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td class="menu"><a href="#" class="menu">Britney Spears </a></td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td class="menu"><a href="#" class="menu">Galerie Photos </a></td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td class="menu"><a href="#" class="menu">Multimedias</a></td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td class="menu"><a href="#" class="menu">Site / Internet </a></td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td><img src="design/menu/lastpictures.jpg" width="153" height="35"></td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td><a href="http://www.britneyspearsgalerie.com/thumbnails.php?album=932" target="_blank"><img src="design/index/lastpic1.jpg" alt="Anniversaire de Christian Audigier" width="153" height="83" border="0"></a></td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td class="content_main"><a href="http://britneyspearsgalerie.com/thumbnails.php?album=733" target="_blank"><img src="design/index/lastpic2.jpg" alt="Babyshower de Jamie-Lynn" width="153" height="83" border="0"></a><br>
             <a href="http://britneyspearsgalerie.com/thumbnails.php?album=lastup&cat=0" target="_blank">Voir les derniers ajouts ?</a></td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td><img src="design/menu/downloadcenter.jpg" width="153" height="35"></td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td><a href="http://britneymedias.com/downloadcenter/" target="_blank"><img src="design/index/downloadcenter.jpg" alt="Acc&eacute;der au Download Center ?" width="153" height="83" border="0"></a></td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td><img src="design/menu/tag.jpg" width="153" height="35"></td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td class="content_main">Tag &agrave; placer ici </td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td><img src="design/menu/projets.jpg" width="153" height="35"></td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td width="11%" class="content_main">&nbsp;</td>
            <td width="89%" class="content_main"><strong>BLACKOUT</strong><br>
              Genre : Album<br>
              Sortie : 30 Octobre 2007<br>
              Ventes : Plus de 2 millions
</td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td width="11%" class="content_main">&nbsp;</td>
            <td width="89%" class="content_main"><strong>BLACKOUT - REEDITION </strong><br>
              Genre : Album<br>
              Sortie : 28 Octobre 2008</td>
          </tr>
        </table>
        <table border="0" cellspacing="0">
          <tr>
            <td><img src="design/menu/top.jpg" width="153" height="35"></td>
          </tr>
      </table></td>
      <td width="76%">&nbsp;</td>
    </tr>
  </table>
</div>

Merci pour ton aide

[Aide] Décalage sous Mozilla Firefox

CSS

Vue hybride

Discussions similaires

Partager

Partager