Foros del Web » Creando para Internet » CSS »

problemas con el 100% de una capa

Estas en el tema de problemas con el 100% de una capa en el foro de CSS en Foros del Web. Tengo el siguiente código <div id="cabecera"><img border="0" src="BS.jpg"></div> y el css * { margin: 0px; padding: 0px; outline: 0; } #cabecera { width: 850px; background-color:#000; ...
  #1 (permalink)  
Antiguo 13/04/2009, 03:39
 
Fecha de Ingreso: marzo-2009
Mensajes: 171
Antigüedad: 8 años, 8 meses
Puntos: 4
problemas con el 100% de una capa

Tengo el siguiente código

<div id="cabecera"><img border="0" src="BS.jpg"></div>


y el css

* { margin: 0px;
padding: 0px;
outline: 0;
}

#cabecera {
width: 850px;
background-color:#000;
text-align: center;
}


He pintado el id de cabecera para ver el fondo. En explorer la imagen se adapta perfectamente a la imagen y no deja ver el color de fondo de la capa que contiene dicha imagen, pero en mozilla siempre deja un padding inferior de 4 o 5 píxeles. Quisiera ajustar esta altura sin necesidad de poner la regla height:loquesea px;
Gracias de antemano


He editado esta sección porque he resuelto en parte el problema gracias al aporte de Mikmoro, una máquina, pero ahora a ver si alguiem me lo explica.
Para empezar el problema es del margen inferior y no del padding que deja la imagen, imagino que un texto también, por tanto hay que darle un margen negativo, en mi caso margin-bottom:-5px. Esto sucede en mozilla. El problema es que si hago esto resto también imagen en explorer con lo cual pierdo cinco píxeles. Alguna solución, sigo investigando.

Última edición por xurxinho; 13/04/2009 a las 06:49 Razón: Arreglado
  #2 (permalink)  
Antiguo 13/04/2009, 16:48
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: problemas con el 100% de una capa

Cita:
Iniciado por xurxinho Ver Mensaje

Para empezar el problema es del margen inferior y no del padding que deja la imagen, imagino que un texto también, por tanto hay que darle un margen negativo, en mi caso margin-bottom:-5px. Esto sucede en mozilla. El problema es que si hago esto resto también imagen en explorer con lo cual pierdo cinco píxeles. Alguna solución, sigo investigando.
Prueba esto:

Código:
#cabecera {
	width: 850px;
	background-color:#000;
	text-align: center;
        margin-bottom: -5px!important;
        margin-bottom:0px;
}
Saludos.

  #3 (permalink)  
Antiguo 14/04/2009, 02:53
 
Fecha de Ingreso: marzo-2009
Mensajes: 171
Antigüedad: 8 años, 8 meses
Puntos: 4
Respuesta: problemas con el 100% de una capa

Funciona y es la solución que adoptaré en adelante. De todas maneras me puedes explicar un poco la lógica de su funcionamiento. Gracias
  #4 (permalink)  
Antiguo 14/04/2009, 15:01
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: problemas con el 100% de una capa

Hola:

El !important controla la prioridad de las declaraciones, entonces en el ejemplo que te he puesto:

Código:
#cabecera {
	width: 850px;
	background-color:#000;
	text-align: center;
        margin-bottom: -5px!important;
        margin-bottom:0px;
}
Firefox no hace caso del segundo margin-bottom pero IE no reconoce el !important, con lo cual el segundo margin-bottom, digamoslo así, anula al primero.

Saludos.

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 17:49.