Padding : Gecko vs Webkit

**Boris56** · 12/07/2010, 02h12

Bonsoir,

Voici une chose que je n'arrive pas à comprendre, pourquoi Gecko(Firefox) et Webkit(Chrome, Safari) gères-t'ils le padding différemment ?

Je m'explique :

J'ai une div que avec les propriétés suivantes :
width :200px
height :200px
padding: 5px;

Sous Firefox(Gecko), la div est bien afficher avec un width de 200px et un padding de 5px.

Mais sous Chrome(Webkit) la même div est affiché avec un width de 210px. Webkit agrandi donc le width en fonction du padding, chose complétement débile vu que c'est un espacement intérieure et est censé ne pas modifié le width original de la div.

Bref, pour ceux qui vont me dire qu'il faut faire un retrait du width original de 200px à 190px, c'est pas la peine

, c'est Firefox qui affiche mal la div après.

Avec le retraite

Sous Chrome : 190 +10 = 200
Sous Firefox : 190 + 0 = 190

Si quelqu'un à une vrai solution, car je comprend pas pourquoi les deux moteurs de rendu affiches deux rendu différents pour une norme unique !

**marco_fot_hxc** · 12/07/2010, 08h19

Bonjour,

Pourrais-tu nous communiquer le bout de xhtml - css qui pose problème ? Je viens de faire le comparatif de mon côté et je ne reproduis pas l'erreur malheureusement.
Sur quoi te base tu pour connaitre la taille finale de ton élément ? Firebug et la console de dév de Chrome ? Si c'est le cas, les deux me donnent exactement les mêmes résultats.

En revanche, il est vrai que sous IE6 par exemple, la gestion du padding était des plus...douteuses !

Bon courage

**Bisûnûrs** · 12/07/2010, 08h29

Envoyé par marco_fot_hxc

En revanche, il est vrai que sous IE6 par exemple, la gestion du padding était des plus...douteuses !

C'est sur IE toutes versions confondues et uniquement en mode Quirks.

**Boris56** · 12/07/2010, 08h30

J'utilise en effet la console firebug et celle de Chrome mais également en changeant directement le code et on voit bien la différence.

Cadeau tout le code : (C'est du HTML5 et du CSS3)

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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<div id="global">
	<section id="list_box">
            <nav class="list">
                <div class="list_top">
                    <p>Vendredi 30 Juillet</p>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>19h30</p>
                    </div>
                    <div class="list_name">
                        <a href="#" rel="mybox">The brownson jacks</a>
                    </div>
                </div> 
                <div class="list_content">
                    <div class="list_time">
                        <p>20h25</p>
                    </div>
                    <div class="list_name">
                        <p>Pony Pony Run Run</p>
                    </div>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>21h35</p>
                    </div>
                    <div class="list_name">
                        <p>Civet</p>
                    </div>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>22h50</p>
                    </div>
                    <div class="list_name">
                        <p>Bad religion</p>
                    </div>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>00h15</p>
                    </div>
                    <div class="list_name">
                        <p>The inspector cluzo</p>
                    </div>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>01h15</p>
                    </div>
                    <div class="list_name">
                        <p>Shaka Ponk</p>
                    </div>
                </div>
            </nav>
            <nav class="list">
                <div class="list_top">
                    <p>Samedi 31 Juillet</p>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>18h00</p>
                    </div>
                    <div class="list_name">
                        <p>Lyse</p>
                    </div>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>18h55</p>
                    </div>
                    <div class="list_name">
                        <p>Plastiscines</p>
                    </div>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>19h50</p>
                    </div>
                    <div class="list_name">
                        <p>Izia</p>
                    </div>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>21h00</p>
                    </div>
                    <div class="list_name">
                        <p>Carmen Maria Vega</p>
                    </div>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>22h00</p>
                    </div>
                    <div class="list_name">
                        <p>Gaetan Roussel</p>
                    </div>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>23h05</p>
                    </div>
                    <div class="list_name">
                        <p>Gablé</p>
                    </div>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>00h00</p>
                    </div>
                    <div class="list_name">
                        <p>Archive</p>
                    </div>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>01h10</p>
                    </div>
                    <div class="list_name">
                        <p>Ebony bones</p>
                    </div>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>02h15</p>
                    </div>
                    <div class="list_name">
                        <p>Yuksek</p>
                    </div>
                </div>
            </nav>
            <nav class="list">
                <div class="list_top">
                    <p>Dimanche 01 Aout</p>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>17h40</p>
                    </div>
                    <div class="list_name">
                        <p>Bagad de Lokoal Mendon</p>
                    </div>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>19h10</p>
                    </div>
                    <div class="list_name">
                        <p>Merzhin</p>
                    </div>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>20h40</p>
                    </div>
                    <div class="list_name">
                        <p>Red Cardell</p>
                    </div>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>22h20</p>
                    </div>
                    <div class="list_name">
                        <p>Celtas Cortos</p>
                    </div>
                </div>
                <div class="list_content">
                    <div class="list_time">
                        <p>00h00</p>
                    </div>
                    <div class="list_name">
                        <p>Plantec</p>
                    </div>
                </div>
            </nav>   
    </section>
    <section id="mybox">
    </section>
</div>

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
body, ul {
	margin: 0px;
	padding: 0px;
	font: 10px normal Arial, Helvetica, sans-serif;
}
 
p {
	text-align: justify;
	margin: 0px;
	padding: 0px;
}
 
li {
	list-style-type: none;
}
 
ol {
	margin: 0;
	padding: 0px;
}
 
a {
	text-decoration: none;
}
 
h2 {
	margin: 0;
}
 
img {
	border: none;
}
 
.clear {
	clear: both;
}
 
section, nav, footer, figure, aside, header {
	display: block;
}
 
#global {
	height: auto;
	width: 600px;
	margin: 0 auto;
	margin-top: 20px;
	-moz-box-shadow: 0 1px 3px black;
	-moz-border-radius: 3px;
	-webkit-box-shadow: 0 1px 3px black;
	-webkit-border-radius: 3px;
}
 
#list_box {
	background: -moz-linear-gradient(top, #ededed, #d0d0d0);
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#d0d0d0));
	display: -moz-box;
	display: -webkit-box;
	min-width: 600px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
 
.list {
	height: auto;
	width: 200px;
	border-left: solid 1px #f0f0f0;
	border-right: solid 1px #a9a9a9;
	padding: 5px;
	display: -moz-box;
	display: -webkit-box;
	-moz-box-orient: vertical;
	-webkit-box-orient: vertical;
}
 
.list_top {
	margin-bottom: 5px;
}
 
.list_top p {
	color: #888888;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	text-shadow: 0 1px 0 #efefef;
	text-transform: uppercase;	
}
 
.list_content {
	display: -moz-box;
	display: -webkit-box;
}
 
.list_content p, .list_content a {
	font-size: 11px;
}
 
.list_time {
	margin-right: 10px;
	color: #000;
	font-size: 11px;
	font-weight: bold;
}
 
.list_name {
	text-transform: uppercase;
}

**devyan** · 12/07/2010, 19h58

Envoyé par Bisûnûrs

C'est sur IE toutes versions confondues et uniquement en mode Quirks.

Cela m'amène à demander ...

Quel DOCTYPE utilises-tu ?

**Boris56** · 12/07/2010, 20h05

<!DOCTYPE HTML> pour l'HTML5

**12monkeys** · 18/07/2010, 14h35

Bonjour

As tu essayé avec un autre doctype ??

Au passage : ton code ne me semble pas sémantiquement propre : beaucoup trop de divs inutiles... La divite est une maladie...

**Boris56** · 20/07/2010, 09h35

Le changement de DOCTYPE ne change rien

Si tu à une remède contre la divite je veux bien le prendre

**eckerdecker** · 20/07/2010, 12h52

Contre la divite déjà tu peux remplacer tes

Code :

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

1
2
3
4
5
6
<div class="list_time">
  <p>20h25</p>
</div>
<div class="list_name">
  <p>Pony Pony Run Run</p>
</div>

par

Code :

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

1
2
<p class="list_time">20h25</p>
<p class="list_name">Pony Pony Run Run</p>

la balise <p> est en display:block par défaut de la même manière que <div>, elle apporte en revanche la précision que le contenu est un paragraphe

Pour ce qui est du fonctionnement des width/height et des padding, le "bon" est celui qui agrandi le rendu final si un padding est fixé : pour avoir 200px de largeur et une marge interne de 10px : width:180px;
Moi j'utilise le doctype suivant :

Code :

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">

**12monkeys** · 20/07/2010, 17h53

Envoyé par Boris56

Si tu à une remède contre la divite je veux bien le prendre

Suis les conseils de eckerdecker sur le sujet, les div doivent structurer les grands ensembles de ta page, pour le contenu utilises des <p> pour les paragraphes, des <hn> pour les titres, des <ul> pour les listes, etc... Il faut utiliser les balises pour ce qu'elles sont prévues...

Pour ton problème il serait peut être bon d'avoir une page en ligne qui reproduit le problème...

**Boris56** · 21/07/2010, 08h46

Envoyé par eckerdecker

Pour ce qui est du fonctionnement des width/height et des padding, le "bon" est celui qui agrandi le rendu final si un padding est fixé : pour avoir 200px de largeur et une marge interne de 10px : width:180px;
Moi j'utilise le doctype suivant :

Code :

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">

Ok mais pourquoi Firefox fait parfois ceci alors :

Marge interne de 5px : width: 200px; --> Largeur de 200px

Voir .list dans le css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.list {
	height: auto;
	width: 200px;
	border-left: solid 1px #f0f0f0;
	border-right: solid 1px #a9a9a9;
	padding: 5px;
	display: -moz-box;
	display: -webkit-box;
	-moz-box-orient: vertical;
	-webkit-box-orient: vertical;
}

**eckerdecker** · 21/07/2010, 09h44

Je viens de faire un test sur tous les navigateurs que j'ai à ma disposition : Firefox, Firefox Mac, Safari Mac, IE6, IE7, IE8, Chrome ; avec un div sur lequel j'ai mis les styles que tu as indiqué, et le doctype que je t'ai cité, j'ai le même rendu pour tous : width:200px + padding:5px = largeur totale 210px

**Boris56** · 21/07/2010, 11h52

Une image vaut mieux qu'un long discours

Peu importe le doctype utilisé.

**Candygirl** · 30/07/2010, 12h25

Hello,

Envoyé par Boris56

[...]
Si quelqu'un à une vrai solution, car je comprend pas pourquoi les deux moteurs de rendu affiches deux rendu différents pour une norme unique !
[...]

Code :

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

1
2
3
4
.list {
	display: -moz-box;
	display: -webkit-box;
}

Tu parles de "norme unique" mais tu fais appel à des valeurs propriétaires à un navigateur spécifique. Dans le modèle de boîte standard, le padding vient s'ajouter en plus du width pour donner la dimension totale (donc les 200px dans ton exemple).

En spécifiant -moz-box tu induis peut-être Firefox à modifier ce comportement et a inclure le padding et le border dans le width.

A noter que la valeur -moz-box pour la propriété display semble non destinée à être utilisée dans un contenu web ?

These display values are not intended for use in web content

Padding : Gecko vs Webkit

CSS

Discussions similaires

Partager

Partager