décalage et découpe d'image sous FF

**greg1386** · 10/03/2007, 00h04

Salut a tous voila j'ai une sorte de bouton avec des image en CSS mais le problèmes c'est que sous FF ( et aussi opéra ) mon bouton est complètement décalé et couper en 2 alors que sous IE 7 il y a pas de soucis

Le site de demo du bug

Le 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
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
104
/*------------------------------------------------------------------- BASE -------------------------------*/
 
body
{
	background-image: url("background.png");
	margin: auto;
	padding: 0px;
	width: 987px;
	margin-top: 15px;
	margin-bottom: 15px;
}
 
div,p,a,img,h1,h2,h3,h4,h5,h6
{
	margin: 0px;
	padding: 0px;
	border: none;
}
div
{
	overflow: hidden;
	padding-right: 15px;
	padding-left: 15px;
}
h1, h2, h3, h4, h5, h6
{
	text-align: center;
 
}
a
{
	color:#B3B3B3;
	text-decoration: none;
}
 
a:hover
{
	color:#FFFFFF;
	text-decoration: underline;
}
 
 
 
/* -------------------------------------------------------------------------CLASS  ,  ID  ------------  */
 
 
div#header
{
	background: url("header.png") no-repeat;
	width: 100%;
	height: 151px;
}
div#header p
{
	padding-top: 14px;
}
 
.menu
{
	background: url("menu.png") no-repeat;
	width: 100%;
	height: 63px;	
}
 
 
div#content
{
	background: url("content.png") repeat-y;
	width: 100%;
	min-height: 330px;
}
 
div#footer
{
	background: url("footer.png") no-repeat;
	width: 100%;
	height: 154px;
}
div#footer p
{
	padding-top: 15px;
}
 
 
/* --------------------------------------------------------------------- Boutton du menu ----------- */
 
a.logon
{
	background: url("button/logon.png") no-repeat;
	width: 87px;
	height: 34px;
	margin : 0px;
	overflow: visible;
}
a.logon:hover
{
	border: none;
	background: url("button/logon_lighted.png") no-repeat;
	width: 87px;
	height: 34px;
	margin : 0px;
	overflow: visible;
 
}

Le XHTML :

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
<!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" xml:lang="fr" >
	<head>
		<title>GBDB</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="skin/1/1.css" />
	</head>
	<body>
		<div id="header"><p> header </p></div>
		<div class="menu"><p class="logon"><a href="index.php" class="logon" ><img src="skin/1/vide.gif"></a></p></div>
		<div id="content"><p> corp </p></div>
		<div id="footer"><p> pied </p></div>
 
	</body>
</html>

ce que je veut c'est que mon bouton soit correctement visible sur tout les navigateur et exactement au même endroit pouvez m'aider svp ?

merci d'avance @+++

ps : j'ai déjà mit un overflow: visible; pour ce qui on le reflex ^^

**MasterOfChakhaL** · 10/03/2007, 00h44

salut,

J'imagine que ton bouton est le lien qui porte la classe logon...
Pour que tes dimensions soient respectées, il faut que ton élément soit affiché comme un bloc, il te faut donc ajouter la propriété display: block;

Les éléments en ligne (un lien est en ligne par défaut) ne sont pas sensés avoir de dimensions (tu as mis le doigt sur un bug d'ie)

EDIT: logiquement, tu dois pouvoir te passer du overflow: visible;

**greg1386** · 10/03/2007, 01h15

Merci c'est super sa marche a 200% ^^

edit : exacte pas besoin d'overflow

décalage et découpe d'image sous FF

CSS

Vue hybride

Discussions similaires

Partager

Partager