[HTML] bordure html qui ne devrait pas exister

Version imprimable

voila ma page :

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
<html>
<style type="text/css">
.rule-ListHeader {
        background: #CDDDE4 none repeat scroll 0 0;
        border-bottom: 1px solid #FFFFFF;
        color: #000000;
        font-size: 12px;
        font-weight: bold;
        margin: 0 0 1px;
        padding: 3px 0 3px 8px;
        text-align: center;
        text-transform: uppercase;
    padding: 0px 0px 0px 0px;
}
 
.rule-SelectedRow {
        background: url(images/gray_gradient.gif) repeat-x;
}
 
.rule-List {
        font-size: 11px;
        font-weight: normal;
        text-align: center;
        padding: 3px 3px 3px 8px;
        background: #F1F1F1 none repeat scroll 0 0;
}
 
.rule-ListEvenRow,.DatePicker .weekheader {
        font-size: 11px;
        font-weight: normal;
        text-align: center;
        padding: 3px 3px 3px 8px;
        background: #F1F1F1 none repeat scroll 0 0;
}
</style>
<body>
<table border="0" class="rule-List" style="width: 100%;">
	<tr class="rule-ListHeader">
		<td style=""></td>
		<td>*</td>
		<td>Name </td>
		<td>Last modified </td>
		<td>Status</td>
	</tr>
</table>
</body>
</html>

A l'affichage j'ai le header de mon tableau bleu mais avec des séparations grises et j'aimerais me débarrasser de ces bordures. Je ne vois pas du tout d'où elle vienne

10/06/2009, 11h06
Vil'Coyote

salut,tu as essayé en spprimant class="rule-List" de ton table?

Voilà le code modifié (indenté et en XHTML 1.0 Strict) :

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
<!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" lang="en" xml:lang="en">
	<head>
		<title>Title</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<style type="text/css">
                        .rule-ListHeader {
                                background: #CDDDE4 none repeat scroll 0 0;
                                border-bottom: 1px solid #FFFFFF;
                                color: #000000;
                                font-size: 12px;
                                font-weight: bold;
                                margin: 0 0 1px;
                                padding: 3px 0 3px 8px;
                                text-align: center;
                                text-transform: uppercase;
                            padding: 0px 0px 0px 0px;
                        }
                         
                        .rule-SelectedRow {
                                background: url(images/gray_gradient.gif) repeat-x;
                        }
                         
                        .rule-List {
                                font-size: 11px;
                                font-weight: normal;
                                text-align: center;
                                padding: 3px 3px 3px 8px;
                                background: #F1F1F1 none repeat scroll 0 0;
                        }
                         
                        .rule-ListEvenRow,.DatePicker .weekheader {
                                font-size: 11px;
                                font-weight: normal;
                                text-align: center;
                                padding: 3px 3px 3px 8px;
                                background: #F1F1F1 none repeat scroll 0 0;
                        }
                </style>
	</head>
	<body>
		<table class="rule-List" style="width: 100%; border:0px;">
			<tr class="rule-ListHeader">
				<td style=""></td>
				<td>*</td>
				<td>Name </td>
				<td>Last modified </td>
				<td>Status</td>
			</tr>
		</table>
	</body>
</html>

La bordure que tu vois est normal :
c'est ne pas une bordure en fait, c'est la juste l'élément table que tu vois parce que tu lui a donné un padding et une couleur de background.

Pour enlever ça, joue avec ces propriétés :

Code:

1
2
3
4
5
6
7
.rule-List {
	font-size: 11px;
	font-weight: normal;
	text-align: center;
	padding: 3px 3px 3px 8px;
	background: #F1F1F1 none repeat scroll 0 0;
}

10/06/2009, 11h14
moi89

c'est plus ou moins idem. Au lieu d'avoir une séparation grise j'ai une séparation blanche.
10/06/2009, 11h17
thomas9501
Parce que tu as du modifié la couleur ...

Pour ne plus avoir de séparation :
Enlève le padding et le background
Code:

1 2 3 4 5 .rule-List { font-size: 11px; font-weight: normal; text-align: center; }
C'est radical mais ça marche xD
10/06/2009, 11h22
moi89

:D:mouarf::D:mouarf::D
C'est ce que j'ai fait, ca ne marche pas
10/06/2009, 11h24
thomas9501

Humm bisard, j'ai testé le code ici et ça marche nickel ...

Tu test avec quel navigateur ? :aie:
10/06/2009, 11h28
moi89

1 pièce(s) jointe(s)

firefox3 et ie6. j'ai joint l'affichage que j'obtiens

Alors je ne comprend pas. Je test sous firefox moi.

As tu testé mon code ou tu as modifié le tiens ?

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
<!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" lang="en" xml:lang="en">
	<head>
		<title>Title</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<style type="text/css">
                        .rule-ListHeader {
                                background: #CDDDE4 none repeat scroll 0 0;
                                border-bottom: 1px solid #FFFFFF;
                                color: #000000;
                                font-size: 12px;
                                font-weight: bold;
                                margin: 0 0 1px;
                                padding: 3px 0 3px 8px;
                                text-align: center;
                                text-transform: uppercase;
                            padding: 0px 0px 0px 0px;
                        }
                         
                        .rule-SelectedRow {
                                background: url(images/gray_gradient.gif) repeat-x;
                        }
                         
                        .rule-List {
                                font-size: 11px;
                                font-weight: normal;
                                text-align: center;
                        }
                         
                        .rule-ListEvenRow,.DatePicker .weekheader {
                                font-size: 11px;
                                font-weight: normal;
                                text-align: center;
                                padding: 3px 3px 3px 8px;
                                background: #F1F1F1 none repeat scroll 0 0;
                        }
                </style>
	</head>
	<body>
		<table class="rule-List" style="width: 100%; border:0px;">
			<tr class="rule-ListHeader">
				<td style=""></td>
				<td>*</td>
				<td>Name </td>
				<td>Last modified </td>
				<td>Status</td>
			</tr>
		</table>
	</body>
</html>

10/06/2009, 11h39
moi89

j'avais modifié le mien mais je viens de testé le tiens idem
10/06/2009, 11h52
thomas9501

2 pièce(s) jointe(s)

Dans ce cas, tu dois avoir d'autres propriétés CSS qui s'appliquent et que nous ne voyons pas ici ...

Test avec uniquement ce fichier, si ce n'est pas déjà le cas ...

PS : En PJ mon aperçu.
Le tour du tableau est blanc puisqu'il s'agit de la page :D
10/06/2009, 11h59
moi89

1 pièce(s) jointe(s)

J'ai l'impression que tu as le même affichage que moi alors que je veux un truc qui ressemble plutôt à ça

Ahh je comprend mieux, tu veux enlever les séparations intérieures ^^

J'avais mal compris.

Pour ça, utilise CELLSPACING="0" qui gère les espaces entre cellules :

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
<!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" lang="en" xml:lang="en">
	<head>
		<title>Title</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<style type="text/css">
                        .rule-ListHeader {
                                background: #CDDDE4 none repeat scroll 0 0;
                                border-bottom: 1px solid #FFFFFF;
                                color: #000000;
                                font-size: 12px;
                                font-weight: bold;
                                margin: 0 0 1px;
                                padding: 3px 0 3px 8px;
                                text-align: center;
                                text-transform: uppercase;
                                padding: 0px 0px 0px 0px;
                        }
                         
                        .rule-SelectedRow {
                                background: url(images/gray_gradient.gif) repeat-x;
                        }
                         
                        .rule-List {
                                font-size: 11px;
                                font-weight: normal;
                                text-align: center;
                        }
                         
                        .rule-ListEvenRow,.DatePicker .weekheader {
                                font-size: 11px;
                                font-weight: normal;
                                text-align: center;
                                padding: 3px 3px 3px 8px;
                                background: #F1F1F1 none repeat scroll 0 0;
                        }
                </style>
	</head>
	<body>
		<table CELLSPACING="0" class="rule-List" style="width: 100%; border:0px;">
			<tr class="rule-ListHeader">
				<td style=""></td>
				<td>*</td>
				<td>Name </td>
				<td>Last modified </td>
				<td>Status</td>
			</tr>
		</table>
	</body>
</html>

10/06/2009, 13h46
moi89

nickel je connaissais pas cette option merci
11/06/2009, 11h05
thomas9501

De rien ;)
Ce fut long mais on y est arrivé :mrgreen: