table décalage sous Firefox

**dams77** · 17/08/2007, 01h35

Bonjour, j'ai un petit problème avec mes tables sous firefox. En effet, il y a un décalage ver la gauche ( de 1 px je pense ).

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
 
#corp form
{
    border: 1px solid #072C4F;
    padding: 4px 8px 10px 8px;
}
#corp table
{
    width: 100%;
    border: 1px solid #072C4F;
    border-collapse: collapse;
    margin: 10px auto;
}
#corp
{
    border: 1px solid #072C4F;
    background: #D8ECFF; 
    margin: 10px 0;
    padding: 5px;
}

Code :

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

1
2
3
4
5
6
7
8
9
 
<div id="corp">
 <form>
   /..../
 </form>
 <table>
   /..../
 </table>
</div>

Voilà en gros mon code. Merci de votre aide.

**trotters213** · 17/08/2007, 10h36

Au début de ton CSS rajoutes ceci :

Code :

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

1
2
3
4
* {
margin:0;
padding:0;
}

et essaie d'ajuster ton tableau en fonction des décalages que cela à opéré.

Si tu veux que l'on t'aide plus il va falloir que tu nous donnes tout le code HTML et CSS.

**dams77** · 17/08/2007, 10h53

Voilà le code 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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>Inscription</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<meta http-equiv="pragma" content="no-cache" />
		<link href="./Templates/css/global.css" rel="stylesheet" type="text/css" />
		<link href="./Templates/css/table.css" rel="stylesheet" type="text/css" />
		<link href="./Templates/css/form.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
<div id="corp">
	<div class="emplacement">
		Emplacement > 
		<a href="inscription.php">Inscription</a>
	</div>
 
	<h1>Inscription</h1>
<form method="post" action="inscription.php" >
	<div>
 
		<fieldset>
			<legend>Identifiant</legend>
			<div class="description">
				dsd
			</div>
			<label>Identifiant</label><input type="text" value="" name="pseudo" />
			<div class="clear"></div>
		</fieldset>
 
		<fieldset>
			<legend>Mots de passes</legend>
			<div class="description">
				fdfdf
			</div>
			<label>Mot de passe</label><input type="password" value="" name="pass1" />
			<div class="clear"></div>
			<label>Retapez votre mot de passe</label><input type="password" value="" name="pass2" />
			<div class="clear"></div>
		</fieldset>
 
		<fieldset>
			<legend>Adresse mail</legend>
			<div class="description">
				fdfdf
			</div>
			<label>Mot de passe</label><input type="text" value="" name="mail1" />
			<div class="clear"></div>
			<label>Retapez votre mot de passe</label><input type="text" value="" name="mail2" />
			<div class="clear"></div>
		</fieldset>
		<div class="boutons">
			<input type="submit" value="S'inscrire" />
			<input type="reset" value="Remise à zéro" />
		</div>
	</div>
</form><table>
	<thead>
		<tr>
			<th class="titre">Information du site</th>
		</tr>
	</thead>
	<tbody>
 
			<tr>
			<td class="categorie">Membre en ligne</td>
		</tr>
		<tr>
			<td class="valeur"></td>
		</tr>
 
			<tr>
			<td class="categorie">Statistique du site</td>
		</tr>
		<tr>
			<td class="valeur">Nombre de discutions : 0, Nombre de messages : 0, Nombre de membres : 0</td>
		</tr>
 
			<tr>
			<td class="categorie">Autre valeur</td>
		</tr>
		<tr>
			<td class="valeur">Temps de génération : 0.0942 s<br />Nombre de requêtes : 3</td>
		</tr>
 
	</tbody>
</table>
<div></div>		
	</body>
</html>

et le 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
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
182
183
184
 
*
{
	margin: 0;
	padding: 0;
}
 
body
{
	font-size: 0.8em;
	font-family: 'Times New Roman', Times, serif;
	margin: 2px 0.5%;
	background-color: #B7DCFF;
}
 
a
{
	color: #072C4F;
	text-decoration: none;
}
 
.clear
{
	clear:both;
}
 
a:hover
{
	color: #274C6F;
}
 
#header, #menu, #corp, #footer
{
	border: 1px solid #072C4F;
	background: #D8ECFF; 
	margin: 5px auto;
	padding: 5px;
}
 
table#menu
{
	width: 100%;
	border: 1px solid #072C4F;
	border-collapse: collapse;
}
 
#menu tbody
{
	background: #476C8F ;
}
 
#menu tbody a
{
	color: #FFFFFF;
	font-weight: bold;
}
 
#menu tbody a:hover
{
	color: #D2D9E5;
}
 
#menu tbody td
{
	text-align: center;
}
 
#corp h1
{
	text-align: center;
	margin: 10px 0 15px 0;
	color: #062D6F;
}
#corp table
{
	width: 100%;
	border: 1px solid #072C4F;
	border-collapse: collapse;
	margin: 0 auto;
}
 
#corp  thead, #corp tfoot
{
	color: #FFFFFF;
	background: #476C8F;
}
 
#corp thead th.sujet , #corp tfoot th.sujet, #corp thead th.vues , #corp tfoot th.vues
{
	width: 90px;
}
 
#corp thead th.dernier , #corp tfoot th.dernier
{
	width: 150px;
}
 
#corp tbody td.categorie
{
	background: #97BCDF ;
	padding: 3px 10px;
	color: #375B7F;
}
 
#corp tbody tr.forum td
{
	padding: 4px;
}
 
#corp tbody tr.forum td.info,  #corp tbody td.valeur
{
	vertical-align: top;
	padding: 2px 4px;
}
 
#corp tbody tr.forum td.status
{
	width: 60px;
}
 
#corp tbody tr.forum td.center
{
	text-align: center;
}
 
#corp tbody td.categorie:first-letter
{
	font-weight: bold;
	color: #274B6F;
}
 
#corp td
{
	border:1px solid #072C4F ;
}
#corp form
{	
	border: 1px solid #072C4F;
	padding: 4px 8px 10px 8px;
}
 
#corp form fieldset
{
	padding: 4px 8px 10px 8px;
	margin: 20px auto 5px auto;
	border: 1px solid #072C4F;
}
 
#corp form fieldset legend
{
	padding-left: 8px;
	padding-right: 4px;
}
 
#corp form fieldset div.description
{
	margin: 10px;
}
 
#corp form fieldset label
{
	display: block;
	width: 75px;
	float: left;
	text-align: right;
}
 
#corp form fieldset input
{
	float: left;
	margin-left: 4px;
}
 
#corp form div.boutons 
{
	text-align: center;
}
 
#corp form div.boutons  input
{
	font-size: 12px;
	padding: 0 4px;
	margin: 0 4px;
}

merdi d'avance pour votre aide

**trotters213** · 17/08/2007, 11h25

Ton problème vient de ceci : border-collapse: collapse;.
Le rendu est légèrement différent de ce que tu voulais au début mais l'erreur n'apparait plus :

Code HTML :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>Inscription</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<meta http-equiv="pragma" content="no-cache" />
		<link href="./Templates/css/global.css" rel="stylesheet" type="text/css" />
		<link href="./Templates/css/table.css" rel="stylesheet" type="text/css" />
		<link href="./Templates/css/form.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
/*CSS ci-dessous*/
                </style>
	</head>
<body>
<div id="corp">
	<div class="emplacement">
		Emplacement > 
		<a href="inscription.php">Inscription</a>
	</div>
 
	<h1>Inscription</h1>
<form method="post" action="inscription.php" >
	<div>
 
		<fieldset>
			<legend>Identifiant</legend>
			<div class="description">
				dsd
			</div>
			<label>Identifiant</label><input type="text" value="" name="pseudo" />
			<div class="clear"></div>
		</fieldset>		
		<fieldset>
			<legend>Mots de passes</legend>
			<div class="description">
				fdfdf
			</div>
			<label>Mot de passe</label><input type="password" value="" name="pass1" />
			<div class="clear"></div>
			<label>Retapez votre mot de passe</label><input type="password" value="" name="pass2" />
			<div class="clear"></div>
		</fieldset>
 
		<fieldset>
			<legend>Adresse mail</legend>
			<div class="description">
				fdfdf
			</div>
			<label>Mot de passe</label><input type="text" value="" name="mail1" />
			<div class="clear"></div>
			<label>Retapez votre mot de passe</label><input type="text" value="" name="mail2" />
			<div class="clear"></div>
		</fieldset>
		<div class="boutons">
			<input type="submit" value="S'inscrire" />
			<input type="reset" value="Remise à zéro" />
		</div>
	</div>
</form>
<table>
	<thead>
		<tr>
			<th class="titre">Information du site</th>
		</tr>
	</thead>
	<tbody>		
			<tr>
			<td class="categorie">Membre en ligne</td>
		</tr>
 
		<!--<tr>
			<td class="valeur"></td>
		</tr>-->
 
			<tr>
			<td class="categorie">Statistique du site</td>
		</tr>
		<tr>
			<td class="valeur">Nombre de discutions : 0, Nombre de messages : 0, Nombre de membres : 0</td>
		</tr>
 
			<tr>
			<td class="categorie">Autre valeur</td>
		</tr>
		<tr>
			<td class="valeur">Temps de génération : 0.0942 s<br />Nombre de requêtes : 3</td>
		</tr>			
	</tbody>
</table>
</div>	
</body>
</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
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
*{
	margin: 0;
	padding: 0;
}
 
body{
	font-size: 0.8em;
	font-family: 'Times New Roman', Times, serif;
	margin: 2px 0.5%;
	background-color: #B7DCFF;
}
 
a{
	color: #072C4F;
	text-decoration: none;
}
 
.clear{
	clear:both;
}
 
a:hover{
	color: #274C6F;
}
 
#header, #menu, #corp, #footer{
	border: 1px solid #072C4F;
	background: #D8ECFF; 
	margin: 5px auto;
	padding: 5px;
}
 
table#menu{
	width: 100%;
	border: 1px solid #072C4F;
	border-collapse: collapse;
}
 
#menu tbody{
	background: #476C8F ;
}
 
#menu tbody a{
	color: #fff;
	font-weight: bold;
}
 
#menu tbody a:hover{
	color: #D2D9E5;
}
 
#menu tbody td{
	text-align: center;
}
 
#corp h1{
	text-align: center;
	margin: 10px 0 15px 0;
	color: #062D6F;
}
 
#corp table{
	width: 100%;
	border: 1px solid #072C4F;
	/*border-collapse: collapse;*/
	margin: 0 auto;
}
 
#corp thead, #corp tfoot{
	color: #fff;
	background: #476C8F;
}
 
#corp thead th.sujet , #corp tfoot th.sujet, #corp thead th.vues , #corp tfoot th.vues{
	width: 90px;
}
 
#corp thead th.dernier , #corp tfoot th.dernier{
	width: 150px;
}
 
#corp tbody td.categorie{
	background: #97BCDF ;
	padding: 3px 10px;
	color: #375B7F;
}
 
#corp tbody tr.forum td{
	padding: 4px;
}
 
#corp tbody tr.forum td.info,  #corp tbody td.valeur{
	vertical-align: top;
	padding: 2px 4px;
}
 
#corp tbody tr.forum td.status{
	width: 60px;
}
 
#corp tbody tr.forum td.center{
	text-align: center;
}
 
#corp tbody td.categorie:first-letter{
	font-weight: bold;
	color: #274B6F;
}
 
#corp td{
	border:1px solid #072C4F ;
}
 
#corp form{	
	border: 1px solid #072C4F;
	padding: 4px 8px 10px 8px;
}
 
#corp form fieldset{
	padding: 4px 8px 10px 8px;
	margin: 20px auto 5px auto;
	border: 1px solid #072C4F;
}
 
#corp form fieldset legend{
	padding-left: 8px;
	padding-right: 4px;
}
 
#corp form fieldset div.description{
	margin: 10px;
}
 
#corp form fieldset label{
	display: block;
	width: 75px;
	float: left;
	text-align: right;
}
 
#corp form fieldset input{
	float: left;
	margin-left: 4px;
}
 
#corp form div.boutons {
	text-align: center;
}
 
#corp form div.boutons input{
	font-size: 12px;
	padding: 0 4px;
	margin: 0 4px;
}

**dams77** · 17/08/2007, 11h40

, il y a toujours un décalage sous firefox ( sur la droite... )

**trotters213** · 17/08/2007, 14h33

Mince j'avais pas fait gaffe

Je viens de me rendre compte d'un truc : pourquoi utilises-tu un tableau pour cette partie alors que tu pourrais faire ça plus simplement et proprement avec des divs ?

table décalage sous Firefox

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager