problemas con el 100% de una capa

xurxinho · #1 (**permalink**) 13/04/2009, 02:39

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.

jomaruro · #2 (**permalink**) 13/04/2009, 15:48

Cita:

Iniciado por xurxinho

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.

xurxinho · #3 (**permalink**) 14/04/2009, 01:53

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

jomaruro · #4 (**permalink**) 14/04/2009, 14:01

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.