Problema importante con el posicionamiento de un div con css

[mgomezbuceta]

Mi problema es que tengo un link emulando a un botón:

<a href="#" class="boton_menu" onclick="ejecuta_funcion(2,0);return false"><div style="height:18px; width:116px;" align="center"><?php echo (boton_consultar); ?></div></a>

con un estilo definido en un css:

a.boton_menu:link,
a.boton_menu:visited,
a.boton_menu:active {
display:block;
color: #808080;
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
width:116px;
height:18px;
border:0px;
cursor:pointer;
background:url(../img/boton_menu.png) no-repeat;
text-decoration:none;
}
a.boton_menu:hover {
background:url(../img/boton_menu_over.png) no-repeat;
color: #FFFFFF;
}

y mi problema está en que el botón se duplica a veces, es decir, me aparecen dos botones, uno sobre el otro; sobretodo cuando recargo la página una o dos veces, o simplemente cuando accedo a la misma.
Alguien sabe por qué?.

Muchas gracias.

[yosoyraro]

Yo el css lo veo bien, puedes mostrar un ejemplo en funcionamiento del error?

[Calizman]

Saludos mgomezbuceta!!

Como dice yosoyraro (valla nick!) tambien veo bien tu CSS... seria mejor si pones un link para ver tu problema!

Saludos!

[DragonX]

Iniciado por CaLiZzZ

Tuyo:
background:url(../img/boton_menu.png) no-repeat;
Correcto
background:url(../img/boton_menu.png); no-repeat;

El "correcto" esta mal, y el "tuyo" esta bien....

background:url(../img/boton_menu.png) no-repeat;

Es correcto!

[Calizman]

Ups! gran error!

Aunque raro.. porque a mi siempre me ha funcionado bien... pero entonces no encuentro error en el CSS de arriba!

Gracias DragonX por la correccion!

[mgomezbuceta]

Buenas.

Gracias por la pronta respuesta.

El problema que me origina es el que se ve en la imagen

[Calizman]

Eso quiere decir que se te ponen dos imagens iguales, una encima de otra no?

Disculpa pero no mucho entiendo esa imagen! =D

[mgomezbuceta]

Exactamente me pasa lo que tu dices, la imagen que tengo de fondo, aunque tengo establecido el no-repeat, se duplica verticalmente.

[Mikmoro]

Una cosita: no deberías poner un elemento de bloque (div), dentro de un elemento de línea (a).

[mgomezbuceta]

Eso lo hago para poder centrar el texto dentro del botón (link).

Si me dices alguna alternativa te lo agradecería Mikmoro.

[Mikmoro]

Si tienes un doctype correcto bastaría con que dejes el enlace así:

<a href="#" class="boton_menu" onclick="ejecuta_funcion(2,0);return false"><?php echo (boton_consultar); ?></a>

y en la CSS añadieras "text-align: center;" al selector que mostrabas (a.boton_menu:link, etc.)

No obstante sería mejor ver tus imágenes para estar seguros, porque sin verlas es más difícil.

[mgomezbuceta]

Muchas gracias por el consejo de eliminar el div, Mikmoro. La verdad es que no se me había ocurrido eso.

En cuanto al problema de la duplicación, la imagen que he puesto es la de ejemplo de lo que me sale en la página, sólo a veces. No tengo más imágenes.

Un saludo.

[Mikmoro]

Me refiero a estas:

background:url(../img/boton_menu.png) no-repeat;
text-decoration:none;
}
a.boton_menu:hover {
background:url(../img/boton_menu_over.png) no-repeat;
color: #FFFFFF;
}

[mgomezbuceta]

Ah, perdona que no te entendía.

Las imágenes son estas:

1: boton_menu



2: boton_menu_over



Gracias

[Mikmoro]

Seguramente habrá alguna razón que desconozco, pero a simple vista, ¿seguro que necesitas esas imágenes para conseguir ese efecto? Lo digo porque con esto:

a.boton_menu:link,
a.boton_menu:visited,
a.boton_menu:active {
display:block;
color: #808080;
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
width:116px;
height:18px;
cursor:pointer;
text-decoration:none;
text-align: center;
border: solid 1px #999;
}
a.boton_menu:hover {
background-color: #f90;
border: solid 1px #f90;
color: #FFFFFF;
}

deberías conseguir lo mismo.