Capa Traviesa

[Nietzsche]

Hola, buenas tardes.

Tengo un problemilla con una capa.
La tengo difinida con las siguientes propiedades:

#centros{
background-color: #70A270;
font-size: 13px;
padding-top: 30px;
width: 210px;
height: 170px;
margin-left: 10px;
margin-top: 4px;
float:left;
}

Le he metido el padding-top porque no quiero que el texto quede pegado al límite de la capa.

El caso es que cuando el firefox me aplica el padding de 30 pixeles, amplía la capa otros 30 píxeles por debajo. Ya no mide de alto 170 como tenía definido, sino que se amplia automaticamente de 170 a 200.

Pensé que podría faltarme un overflow:hidden;

Pero aún así no se me soluciona el problema.

Ti quito la línea padding-top la capa ocupa exactamente el espacio que debe, pero al volver a añadir esta línea ya digo que se amplia automáticamente y me chafa la capa que tengo justo debajo.

¿Alguien me puede orientar?

Muchas gracias.

[Mikmoro]

Puedes reemplazar el paddin-top por dos BR's

<br/><br/>

Aunque quizá es más lógico que el texto lo metas dentro de algo (p, span, h2, etc.), y lo ajustes mediante margen superior. No sé si me explico.

Mikel.

[Nietzsche]

Si, esas dos opciones solucionarían el problema.

Lo de los br lo veo un poco chapucero

Quizás use la segunda opción.

He abierto el post porque pensaba que estaba haciendo algo mal, porque no me parece lógico ese comportamiento en la capa.

[Mikmoro]

Pues sí es normal. Lo que no lo es es lo que hace IE.

Si una caja mide 200px, para la mayoría de navegadores mide 200px. Si le añades borde, padding, etc, la caja sigue midiendo 200px más los añadidos. Para IE es al contrario.

Mikel.