Foros del Web » Creando para Internet » CSS »

Problemas de compatibilidad con Mozilla

Estas en el tema de Problemas de compatibilidad con Mozilla en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/08/2007, 01:27
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 12 años
Puntos: 1
Problemas de compatibilidad con Mozilla

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.
  #2 (permalink)  
Antiguo 16/08/2007, 04:21
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Re: Problemas de compatibilidad con Mozilla

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
__________________
Javascript Códigos - Bambú difunde
  #3 (permalink)  
Antiguo 16/08/2007, 05:06
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 12 años
Puntos: 1
Re: Problemas de compatibilidad con Mozilla

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.
  #4 (permalink)  
Antiguo 16/08/2007, 05:13
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Re: Problemas de compatibilidad con Mozilla

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
  #5 (permalink)  
Antiguo 16/08/2007, 11:42
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 12 años
Puntos: 1
Re: Problemas de compatibilidad con Mozilla

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:40.