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

espidifen33 · #1 (**permalink**) 13/12/2008, 13:06

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>

rb3m · #2 (**permalink**) 13/12/2008, 13:29

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>

txusweb · #3 (**permalink**) 13/12/2008, 13:34

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.

espidifen33 · #4 (**permalink**) 13/12/2008, 13:35

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.

espidifen33 · #5 (**permalink**) 13/12/2008, 13:51

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?

rb3m · #6 (**permalink**) 13/12/2008, 14:57

Cita:

Iniciado por espidifen33

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.

espidifen33 · #7 (**permalink**) 14/12/2008, 14:54

Cita:

Iniciado por rb3m

¿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!