[CSS] Affichage background avec bordure
Bonjour a tous,
J'ai un probleme sur l'affichage d'une image en background d'un de mes conteneurs (div#content). L'image s'affiche bien, la bordure aussi (avec bords arrondis sous FF) mais sous FireFox justement une bande de pixel apparait apres la bordure alors que sous IE ce probleme n'apparait pas.
Cela fait plusieurs heures que je cherche et je n'ai toujours pas trouve.
Code CSS:
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
|
body {position: relative; margin: 0; padding: 0;}
div#content p {margin: 0 1em 1em; padding: 0; line-height: 1.3;}
h1 {margin: 0.5em -4px 0.5em; padding: 0.33em 0 0.167em;
font: bold 200% sans-serif; vertical-align: middle;
color: #024; letter-spacing: 0.5em; }
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {color: blue;}
div#content a:visited {color: purple;}
div#content a:link:hover {color: red;}
div#content a:visited:hover {color: maroon;}
code, pre {color: #446; font-family: monospace;}
code {font-size: 110%;}
img {
border: none;
vertical-align: middle;
}
body {background: #000000 }
div#page {
font-size: 11px;
font-family: Arial, sans-serif;
line-height: 14px;
background-color: #000000;
text-align: left;
visibility: visible;
margin-top: 40px;
margin-right: auto;
margin-left: auto;
margin-bottom: 40px;
position: relative;
width: 700px
}
div#content {
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
position: relative;
padding: 2%;
width: 71%;
float: left;
font-family: Arial, sans-serif;
border: solid #900;
-moz-border-radius:20px;
border-radius:20px;}
div#pub {
margin-top: 15px;
margin-bottom: 10px;
margin-right: auto;
margin-left: 1%;
width: 140;
height: 510;
position: relative;
float: left;
width: 20%;
}
div#content {background: #8CC684 url(graph/feuilleV.gif) 0 0 no-repeat fixed; background-position: 60% 80%;}
div#content h1 {background: #DBDB00 url(graph/feuilleJ.gif) 0 0 no-repeat fixed; border: 1px solid gray; padding: 0.5em 1em 0.25em;background-position: 60% 80%; } |
Code HTML:
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
|
<div id="page">
<div id="content">
<h1>Maquette</h1>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
</div>
<div id="pub" align="center">
<img src="graph/PUB.gif">
</div>
</div> |
Merci de votre aide.
