Foros del Web » Creando para Internet » CSS »

Propiedad "width" en firefox. ¿Por qué no funciona?

Estas en el tema de Propiedad "width" en firefox. ¿Por qué no funciona? en el foro de CSS en Foros del Web. Hola, estoy haciendo un menu simple con css. De momento lo que quiero es que todos los elementos del menú ocupen el mismo ancho. El ...
  #1 (permalink)  
Antiguo 13/12/2008, 13:06
 
Fecha de Ingreso: marzo-2005
Mensajes: 14
Antigüedad: 12 años, 9 meses
Puntos: 0
Propiedad "width" en firefox. ¿Por qué no funciona?

Hola, estoy haciendo un menu simple con css. De momento lo que quiero es que todos los elementos del menú ocupen el mismo ancho. El problema es que en Internet Explorer si me coge el ancho pero en fireforx no. Este es mi código en el fichero css:

a.link
{
border-right: 1px solid #000;
width: 90px;
}

Y este el fichero html:

<body>
<div id="contenedor">
<div id="cabecera">
<img src="imagenes/header.png" alt="header" />
</div>
<a href="#" class="link">Home</a>
<a href="#" class="link">Noticias</a>
</div>
</body>
  #2 (permalink)  
Antiguo 13/12/2008, 13:29
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 9 años
Puntos: 6
Respuesta: Propiedad "width" en firefox. ¿Por qué no funciona?

Inténtalo así:

a.link
{
display: block;
float: left;
border-right: 1px solid #000;
width: 90px;
}

Tu código html queda igual sólo que al final debemos limpiar los elementos flotados:

<a href="#" class="link">Home</a>
<a href="#" class="link">Noticias</a>
<div style="clear: both;"></div>
  #3 (permalink)  
Antiguo 13/12/2008, 13:34
 
Fecha de Ingreso: diciembre-2008
Mensajes: 56
Antigüedad: 9 años
Puntos: 1
Respuesta: Propiedad "width" en firefox. ¿Por qué no funciona?

Hola, la etiqueta a es un elemento en linea y a los elementos en linea no se les puede aplicar una anchura especifica, es por eso que hay que definirlo como bloque.

La anchura en elementos en linea solamente funcionará en Internet Explorer 6.
  #4 (permalink)  
Antiguo 13/12/2008, 13:35
 
Fecha de Ingreso: marzo-2005
Mensajes: 14
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Propiedad "width" en firefox. ¿Por qué no funciona?

rb3m, con lo tuyo ahora si me respeta el ancho pero me mete los enlaces uno debajo de otro, y no uno detrás de otro como yo quiero.

Última edición por espidifen33; 13/12/2008 a las 14:07
  #5 (permalink)  
Antiguo 13/12/2008, 13:51
 
Fecha de Ingreso: marzo-2005
Mensajes: 14
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Propiedad "width" en firefox. ¿Por qué no funciona?

txusweb, efectivamente si en el fichero css pongo a.link como identificador y no como clase (#link en lugar de a.link) y le pongo float:left me funciona, pero entonces no puede meterle las propiedades hover, visited, ... que se le meten a los hiperenlaces, no?
  #6 (permalink)  
Antiguo 13/12/2008, 14:57
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 9 años
Puntos: 6
Respuesta: Propiedad "width" en firefox. ¿Por qué no funciona?

Cita:
Iniciado por espidifen33 Ver Mensaje
rb3m, con lo tuyo ahora si me respeta el ancho pero me mete los enlaces uno debajo de otro, y no uno detrás de otro como yo quiero.
¿Incluso con el float: left; ?

a.link
{
display: block;
float: left;

Le puedes meter las pseudoclases igual que siempre, sea que uses id o class:

a.link:link { ... }
a.link:visited { ... }
...

o

a#link:link { ... }
a#link:visited { ... }

o, cualquier cosa:

a.menu:link { ... }
a.menu:visited { ... }

Claro, teniendo en cuenta que los identificadores (id) sólo los debes usar una vez en tu html, mientras que las clases las puedes repetir.

Última edición por rb3m; 13/12/2008 a las 15:03
  #7 (permalink)  
Antiguo 14/12/2008, 14:54
 
Fecha de Ingreso: marzo-2005
Mensajes: 14
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Propiedad "width" en firefox. ¿Por qué no funciona?

Cita:
Iniciado por rb3m Ver Mensaje
¿Incluso con el float: left; ?

a.link
{
display: block;
float: left;

Le puedes meter las pseudoclases igual que siempre, sea que uses id o class:

a.link:link { ... }
a.link:visited { ... }
...

o

a#link:link { ... }
a#link:visited { ... }

o, cualquier cosa:

a.menu:link { ... }
a.menu:visited { ... }

Claro, teniendo en cuenta que los identificadores (id) sólo los debes usar una vez en tu html, mientras que las clases las puedes repetir.
Joe que tonto estoy, se me habia pasado meterle el float:left, ahora sí me va. Solo una cosa, que seguramente ya la sabes, pero bueno, por si acaso. Si haces que un elemento inline flote, automaticamente pasa a comportarse como bloque, por lo tanto poniendo solo float:left (sin el display:block) también funciona.

Ah y muchas gracias por lo de que debemos limpiar los elementos flotados,no se me veia bien y era eso, me estaba volviendo loco.

Gracias!
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 06:59.