Problemas de compatibilidad con Mozilla

[Tarzan]

Hola a todos/as,

Tengo un problema con mi archivo CSS y el Navegador Mozilla.
Este es el trozo de código que no funciona bien en este navegador:

.btnMenu {
FONT-SIZE: 15px;
BACKGROUND-IMAGE: url(../img/Space/sepmenu.jpg);
WIDTH: 98px;
PADDING-TOP: 1px;
BACKGROUND-REPEAT: no-repeat;
FONT-FAMILY: Arial;
HEIGHT: 21px;
BACKGROUND-COLOR: #e6e6aa;
TEXT-ALIGN: center;
text-color: black
}
.btnMenu:hover {
WIDTH: 98px;
HEIGHT: 21px;
BACKGROUND-COLOR: #fbfbe0;
text-color: black
}

Se trata de una clase que tengo en el CSS. En el Explorer funciona bien y se ve a las mil maravillas pero en Mozilla no es así. Los botones del menú de la web aparecen encogidos y no se respeta el ancho y alto especificado en el código para cada objeto btnMenu.

La llamada desde el html a cada botón del Menú es:

<TD><A class=btnMenu href="empresa.php?logo=1">Empresa </A></TD>
<TD><A class=btnMenu href="catalogo.php?logo=2">Catálogo </A></TD>
<TD><A class=btnMenu href="pedidos.php?logo=3">Pedidos</A></TD>

etc....

¿Por qué no funciona bien el width y height del css en Mozilla?... Pensaba que estas 2 especificaciones eran bastante generales y comunes a todos los navegadores.... ¿Cómo podría resolverlo?.

La web es www.suresdata.es por si alguien quiere ver el resultado. Aquí se pueden observar las diferencias entre Explorer y Mozilla nada más saltar el flash inicial.

[tunait]

Hola qué tal

El tema es que Firefox lo está mostrando correctamente según las especificaciones. Los atributos width y height no son aplicables a elementos de línea, como es el caso.

La clase la estás aplicando a elementos de hipervínculo (a) que son elementos en línea (inline element)

Deberás manejar la altura con line-height y la anchura con márgenes internos (padding)

Un saludo

[Tarzan]

Muchísimas gracias Tunait por el consejo pero, ¿cómo puedo simular un ancho de 99px utilizando paddings?.

Necesito que todos los objetos de la clase botón que creo tengan ese ancho para encajarlos bien en la tabla. ¿No hay ninguna instrucción para el firefox que me permita seleccionar el ancho de una clase?... Sé que estoy utilizando esta clase como un href perteneciente a la etiqueta a pero estoy probando con los paddings y no consigo nada....

¿Puedes ponerme un ejemplo con la clase que yo tengo (.btnMenu) para simular esos 98px sin utilizar el WIDTH?

Gracias de nuevo por tu interés.
Un saludo.

[tunait]

Hum... un ancho exacto meditante padding con contenido de longitud variable es complicado.


Aunque hora que me fijo, tienes los links dentro de celdas. Puedes solucionarlo pidiendole que esos links sean elementos de bloque.

agrégale un display: block a esa clase y te tomará entonces los atributos de width y height

prueba y me cuentas

[Tarzan]

Jeje... ahora sí que funciona!!!
Con el block: display en la clase recoge perfectamente el ancho y el alto..

La verdad es que había cambiado la llamada a la clase desde el link y estaba utilizando un div pero no me respetaba el hover.
La verdad es que me han dicho que es mejor utilizar divs para estas cosas porque los links <a> se utilizan en más sitios y, puede que no me interese heredar todas las características...
De todas formas ahora que funciona lo voy a dejar como tú me has dicho!!


Muchas gracias Tunait.