Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Problemas constantes con bordes sólidos en firefox (ejemplo) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/04/2008, 05:26
Usuario no validado
 
Fecha de Ingreso: marzo-2004
Mensajes: 349
Antigüedad: 13 años, 8 meses
Puntos: 0
Problemas constantes con bordes sólidos en firefox (ejemplo)

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:
<style>
#capa1{
width:150px;
float:left;}

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



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


#contenedorcapas{
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
margin-top: 5px;
margin-bottom: 5px;
padding: 5px 0px 5px 0px;
width:400px;background-color: red;
}
</style>
</head>
<body>
<div id="contenedorcapas">

<div id="capa1">
<img border="0" src="imag-BG.jpg" width="125" height="51"><br>
TEXTO DE 1
</div>

<div id="capa2">
<img border="0" src="imag-BG.jpg" width="125" height="51"><br>
TEXTO DE 2

</div>

<div id="capa3">
<img border="0" src="imag-BG.jpg" width="125" height="51"><br>
TEXTO DE 3
</div>
</div>
  #2 (permalink)  
Antiguo 01/04/2008, 06:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Problemas constantes con bordes sólidos en firefox (ejemplo)

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.
  #3 (permalink)  
Antiguo 01/04/2008, 06:29
Avatar de arriaka  
Fecha de Ingreso: febrero-2008
Mensajes: 45
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Problemas constantes con bordes sólidos en firefox (ejemplo)

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.
  #4 (permalink)  
Antiguo 01/04/2008, 11:11
Usuario no validado
 
Fecha de Ingreso: marzo-2004
Mensajes: 349
Antigüedad: 13 años, 8 meses
Puntos: 0
Re: Problemas constantes con bordes sólidos en firefox (ejemplo)

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:
<style>
#contenedor {
width: 960px;
margin-top: 8px;border-left: 5px solid #000000;
}
#columnaA {
width: 370px;
float: left;
margin-right: 20px;border-left: 1px solid #c0c0c0;
}

div#columnaB {
width: 320px;
float: left;
margin-right: 20px;
}
div#columnaC {
width: 220px;
float: left;
}
</style>

</head>

<body>
<div id="contenedor"><div id="columnaA">ab</div>
<div id="columnaB">b</div>
<div id="columnaC">c</div>
</div>
  #5 (permalink)  
Antiguo 01/04/2008, 11:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Problemas constantes con bordes sólidos en firefox (ejemplo)

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.
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 19:28.