Padding : Gecko vs Webkit

Version imprimable

12/07/2010, 02h12
Boris56

Padding : Gecko vs Webkit
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 ! :aie:
12/07/2010, 08h19
marco_fot_hxc

Etrange

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
12/07/2010, 08h29
Bisûnûrs

Citation:

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.

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:

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:

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;
}

12/07/2010, 19h58
devyan

Citation:

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 ? ;)
12/07/2010, 20h05
Boris56

<!DOCTYPE HTML> pour l'HTML5 ;)
18/07/2010, 14h35
12monkeys

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...
20/07/2010, 09h35
Boris56

Le changement de DOCTYPE ne change rien ;)

Si tu à une remède contre la divite je veux bien le prendre :mouarf:
20/07/2010, 12h52
eckerdecker
Contre la divite déjà tu peux remplacer tes
Code:

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:

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
20/07/2010, 17h53
12monkeys

Citation:

Envoyé par Boris56

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

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

Citation:

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:

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

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; }

21/07/2010, 09h44
eckerdecker

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
21/07/2010, 11h52
Boris56

Une image vaut mieux qu'un long discours :lol:

Peu importe le doctype utilisé.

http://www.presse-minute.net/wp-cont...10/07/test.jpg
30/07/2010, 12h25
Candygirl
Hello,
Citation:
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:

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 ?

Citation:

These display values are not intended for use in web content