[HTML] bordure html qui ne devrait pas exister

**moi89** · 10/06/2009, 11h55

voila ma page :

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

**Vil'Coyote** · 10/06/2009, 12h06

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

**thomas9501** · 10/06/2009, 12h11

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

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

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

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

**moi89** · 10/06/2009, 12h14

c'est plus ou moins idem. Au lieu d'avoir une séparation grise j'ai une séparation blanche.

**thomas9501** · 10/06/2009, 12h17

Parce que tu as du modifié la couleur ...

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

Code :

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

1
2
3
4
5
.rule-List {
	font-size: 11px;
	font-weight: normal;
	text-align: center;
}

C'est radical mais ça marche xD

**moi89** · 10/06/2009, 12h22

C'est ce que j'ai fait, ca ne marche pas

**thomas9501** · 10/06/2009, 12h24

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

Tu test avec quel navigateur ?

**moi89** · 10/06/2009, 12h28

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

**thomas9501** · 10/06/2009, 12h36

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

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

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

**moi89** · 10/06/2009, 12h39

j'avais modifié le mien mais je viens de testé le tiens idem

**thomas9501** · 10/06/2009, 12h52

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

**moi89** · 10/06/2009, 12h59

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

**thomas9501** · 10/06/2009, 13h18

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 :

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

**moi89** · 10/06/2009, 14h46

nickel je connaissais pas cette option merci

**thomas9501** · 11/06/2009, 12h05

De rien

Ce fut long mais on y est arrivé

[HTML] bordure html qui ne devrait pas exister

HTML

Discussions similaires

Partager

Partager