[RESOLU] Background bouton rogné sous Firefox

Bonjours

j'aimerais créer un bouton personnalisé avec un effet rollover,
centré horizontalement dans son contenu

Donc :

a.bouton:link{
	width:257px;
	height:41px;
	background-color:#000080;
	background-image: url(BTN_INSCRIRE.png);
	background-repeat: no-repeat;
	background-position: left top;
}
a.bouton:hover{
	width:257px;
	height:41px;
	text-align:center;
	background-image:url(BTN_INSCRIRE.png);
	background-position: left -41px;
}
.bouton{
text-align:center;
}

<p class="bouton">
 <a href="#" class="bouton"></a>
</p>

Mais sous Firefox la hauteur et la largeur de mon image n'est pas pris en compte contrairement sous IE ?
le float: left; arrange ce problème mais ne centre plus mon bouton

Merci de m'aider
Modifié par olimann (06 Oct 2008 - 10:32)

Selon les specifications du W3C, on ne peut pas mettre de dimensions à un élément non-replaced avec un display inline, ce qui est le cas de la balise <a>.

Firefox respectant les standards, ta balise <a> a la dimension de son contenu (en largeur), et de la hauteur de la ligne (... en hauteur tu l'a deviné).

IE ne les respecte pas.

En mettant donnant la valeur 'left' à la propriété 'float' de la balise <a>, tu lui donnes un display 'block', ce qui donne le résultat dont tu as parlé.

Voilà pour la compréhension des symptômes, pour le remède... je pense que tu veux faire un menu, non ?
Dans ce cas, tu peux t'inspirer du menu de... http://www.mozilla-europe.org/fr/firefox/ par exemple.

merci pour toutes ces informations

"laruiss" a écrit :
je pense que tu veux faire un menu, non ?

Non c'est plus simple que ça. Je veux juste centrer horizontalement un "bouton" ( enfin un background quoi !) dans son contenu ( he oui )
Modifié par olimann (06 Oct 2008 - 00:46)

Bon ! En cherchant un peu :

a.bouton {
	display: block;
	background-image: url(BTN_INSCRIRE.png);
	background-repeat: no-repeat;
	width: 257px;
	height: 41px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	background-position: left top;
}
a.bouton:hover {
	background-position: 0 -41px;
	color: #FF7200;
}

sous IE, pour centrer le bouton dans son container : text-align: center;

Merci !
Modifié par olimann (06 Oct 2008 - 10:32)