Discussion :

[samtheh]

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 :

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

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

[Dayom]

Pourrai tu mettre un screenshot ou lien s'il te plais ?

Sinon, je suis pas très fort en CSS, mais pourquoi metre un

Code :

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

<div id="pub" align="center">

?

Ne serai t'il pas plus simple de definir la propriété text-align en center dans ta feuille CSS ?

[samtheh]

Voici un lien : http://kraverts.free.fr/

pour le div pub ca y est cela a ete corrige. Mais cela ne change pas mon probleme.

Sous firefox le feuille deborde de la bordure en bas, cela fait vraiment moche et je ne vois vraiment pas quoi faire.