Problema con css

[alvaro0022]

Hola:

Tengo un problema que me lleva loco. Estoy creando unos botones con css y no puedo centrar texto verticalmente.

este es el diseño



Aqui mi CSS

Código:

.botonmenu  {
color:	#FFFFFF;
display:	block;
font-size:	15px;
font-weight:	bold;
height:	60px;
text-decoration:	none;
width:	100px;
}

.botonmenu:hover  {
background-image:	url("http://www.juegga.com/i/menuon.png");
color:	#FFFFFF;
display:	block;
font-size:	15px;
font-weight:	bold;
height:	60px;
text-decoration:	none;
width:	100px;
}

.menu  {
background-attachment:	scroll;
background-color:	0 0 transparent;
background-image:	url("http://www.juegga.com/i/fondo menu.png");
background-position:	;
background-repeat:	no-repeat;
height:	70px;
margin:	0 0 35px;
padding-top:	4px;
width:	990px;
}

Aqui mi codigo HTML;

Código:

<div class="logo" align="center"><a href="http://www.juegga.com"><img src="http://www.juegga.com/i/logo.png" alt="Logo" width="250" height="150" border="0" title="Juegos Gratis"></a></div>
<div class="menu" >
<a class="botonmenu" href="http://www.juegga.com">Home</a>
</div>

Intente con padding pero en firefox se deforma el boton.

Alguien tiene alguna idea?

[Batan]

Añadele un padding al bottonmenu, y al hover restale el número de px que añadiste en tu padding.

[alvaro0022]

Hola

Ya habia probado eso, esto es lo que sucede:

en internet explorer queda bien pero en firefox se deforma el boton

[Batan]

Copia y pega este codigo por el tuyo y me dices si te funciona.

Código CSS:

.menu{
background-attachment: scroll;
background-color: 0 0 transparent;
background-image: url("http://www.juegga.com/i/fondo menu.png");
background-repeat: no-repeat;
height: 65px;
margin: 0 0 35px;
width: 990px;
padding-top: 5px;
padding-left: 5px;
}
 
.botonmenu{
color: #FFFFFF; 
display: block; 
font-size: 15px; 
font-weight: bold; 
height: 60px; 
text-decoration: none; 
width: 100px; 
padding-top: 10px; 
text-align: center;
}
 
.botonmenu:hover{
background-image: url("http://www.juegga.com/i/menuon.png"); 
color: #FFFFFF; 
display: block; 
font-size: 15px; 
font-weight: bold; 
height: 49px;
*height: 59px;
padding-top: 10px;
 
text-align: center;
text-decoration: none; 
width: 100px;}
 

[alexk]

Agrega
line-height:60px;
segun la altura del menu.... sin paddings

[alvaro0022]

Gracias por sus respuestas

Batan sos un genio!!

Funciona perfecto.

Pudo ver que era esto no? *height: 49px; para firefox

Mil gracias