Problemas constantes con bordes sólidos en firefox (ejemplo)

JBRS · #1 (**permalink**) 01/04/2008, 04:26

Hola,

Cada dos por tres, cuando a una capa, imagen etcétera le pongo un borde, explorer lo muestra bien pero firefox, simplemente, pasa. Tengo un ejemplo aquí de capa con 3 imágenes dentro que no logro que se vea ni el fondo en firefox, mientras explorer lo muestra a la primera. ¿Por qué esto? ¿cómo solucionarlo?

(El codigo necesitará optimización porque he ido haciendo pruebas por separado para ver qué fallaba... sin éxito, claro.)

Los bordes y fondo de contenedorcapas es lo que no muestra.

Cita:

Mikmoro · #2 (**permalink**) 01/04/2008, 05:14

Pues es un fallo de lo más tonto:
tienes dos veces cerradas las llaves de los selectores capa2 y capa3

#capa2{
width:150px;float:left;}
}
#capa3{
width:150px;
float:right;}
}

y por eso no te lee lo que viene detrás.

Mikel.

arriaka · #3 (**permalink**) 01/04/2008, 05:29

Por lo menos en este caso hay errores al escribir el css, has dos cierres en estos casos:

Cita:

#capa2{
width:150px;float:left;}
}

#capa3{
width:150px;
float:right;}
}

Con solamente ponerlo bien, ya sale el fondo y el borde:

Código:

#capa2{
width:150px;
float:left;
}

#capa3{
width:150px;
float:right;
}

Ten en cuenta que el Explorer es mas permisivo, admite mas "chapuzas". Firefox es mas estricto.

Para que no haya estos problemas, te recomiendo que identes todo bien (hacer sangrias). Por otra parte, hay que evitar meter estilos en html, para eso esta el css. En este caso a las imagenes le das un tamaño, y le das borde 0. Si la imagen no tiene el tamaño que quieres, modificalo antes en Photoshop (asi perdera menos calidad) y si le has puesto borde a las imagenes y en este caso se lo quieres quitar:

Código:

#capa1 img, #capa2 img, #capa2 img{
	border:0px;
}

saludos.

JBRS · #4 (**permalink**) 01/04/2008, 10:11

Ups... sin duda he puesto un ejemplo lamentable.
No obstante, os pongo otro en que me pasa lo mismo: el borde de la capa contenedor no sale en firefox y sí en explorer. Vale que en este caso podría solucionarse poniéndo el borde en otra capa, pero es que en un caso más complejo y difícil de copiar que estoy usando, necesito dos bordes diferentes y firefox me lo fastidia:

Cita:

Mikmoro · #5 (**permalink**) 01/04/2008, 10:29

Esto lo resuelves poniendo overflow: auto; a tu contenedor.
Es que como las tres cajas están flotadas, el contenedor no crece. Sólo lo hace en IE.

Mikel.