Création de boutons et erreurs dans le CSS

Bonjour,

Je tente désespérément de détecter certaines failles lors de la création d'un menu sous forme de boutons et lorsque je teste mon code sur chrome et safari, je m'aperçois que des "morceaux de boutons" s'invitent un peu partout sur la page.

Ci-joint le code html (le css étant incorporé directement dedans via la balise <style></style>ainsi que les captures d'écran de ma page sur chrome et safari (je n'ai pas i.e, mozilla et opéra).

Par avance, merci pour votre aide et bon week-end ensoleillé à tous !

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
<!DOCTYPE html>
<html>
	<head>
		<title>sl9da</title>
			<meta charset="utf-8"/>
				<style>
                                body{
                                background: white;
                                }
                                ul{
                                display: table;
                width: 500px;
                margin: 100px;
                                }
                                ul li
                                {
                                display : table-cell;
                                }
                                .pomme
                                {
                font-family: Arial;
                font-size: 1.6em;
                width: 200px;
                height: 43px;
                padding-left: 7px;
                padding: 7px 7px 7px 7px;
                text-align: center;
                color: #000;
                background: #444;
                text-decoration: none;
                }
                                .poire
                                {
                font-family: Arial;
                font-size: 1.6em;
                width: 200px;
                height: 43px;
                padding: 7px 7px 7px 7px;
                text-align: center;
                color: #000;
                background: #444;
                text-decoration: none;
                                }
                                .fraise
                                {
                font-family: Arial;
                font-size: 1.6em;
                width: 200px;
                height: 43px;
                padding: 7px 7px 7px 7px;
                text-align: center;
                color: #000;
                background: #444;
                text-decoration: none;
                }
                                .banane
                                {
                font-family: Arial;
                font-size: 1.6em;
                width: 100px;
                height: 43px;
                padding: 7px 7px 7px 7px;
                text-align: center;
                color: #000;
                background: #444;
                text-decoration: none;
                }
                                .melon
                {
                                font-family: Arial;
                font-size: 1.6em;
                width: 200px;
                height: 43px;
                padding: 7px 7px 7px 7px;
                text-align: center;
                color: #000;
                background: #444;
                text-decoration: none;
                                }
                                p{
                        font-family: Arial;
                        font-size: 1.6em;
                        width: 200px;
                        height: 43px;
                        padding-top: 7px;
                        text-align: center;
                        color: #000;
                        background: #444;
                text-decoration: none;
                                }
                                </style>
	</head>
				<body>
						<ul>
					<li><a class="pomme"href="#1"</a>pomme</li>
					<li><a class="poire"href="#2"</a>poire</li>
					<li><a class="fraise"href="#3"</a>fraise</li>
					<li><a class="banane"href="#4"</a>banane</li>
					<li><a class="melon"href="#5"</a>melon</li>
						</ul>
						<p>Press</p>
				</body>
</html>

Pièce jointe 147414
Pièce jointe 147415