dimesion de div con background

Calisco · #1 (**permalink**) 18/04/2007, 13:25

Tengo este estilo de clase

Código PHP:

         { 
    width: 550px; 
    height: 17px; 
    background: #FFF url('_imgs/post01.jpg') no-repeat center; 
    }

La imagen post01.jpg tiene las mismas dimensiones que el div, o sea, 550pc x 17px.
El tema es que el muy puto IE me muestra un poquito de fondo blanco; una linea en la parte inferior. Es blanca porque en realidad está mostrando el color de fondo del div. Y si por ejemplo cambio el height a 10px IE tampoco me hace caso, me muestra la imagen completa.
Seguro que es algo sencillo, pero mi fuerte no es CSS.
Saludos y Gracias

PatomaS · #2 (**permalink**) 18/04/2007, 19:10

Hola

Bueno, no se si se vea afectado por algún otro estilo, pero puedes agregar esto al que tienes por si no lo estás controlando:

border: 0; margin: 0; padding: 0;

Felicidad

Calisco · #3 (**permalink**) 18/04/2007, 19:39

Creo que el tema es porque el div donde le aplico la clase de estilo no le pongo nada, o sea:
[php]
<div class="el_estilo"></div>.
FF me toma las dimensiones bien; pero IE no.
Saludos.

caricatos · #4 (**permalink**) 18/04/2007, 22:40

Hola:

explorer pone a las capas vacías un height mínimo equivalente a un salto de línea... la forma que en alguna ocasión solucioné el problema ha sido con el estilo overflow: hidden (parece que no tiene que ver, pero así respeta el tamaño declarado)

Saludos

PatomaS · #5 (**permalink**) 19/04/2007, 00:12

Hola gente

Bueno, la solución de caricatos ciertamente me parece original, no veo la relación, pero como bien dice, si funciona, funciona.

;)

Yo lo suelo hacer agregando un espacio en blanco a la capa

Ya sea

Código:

&nbsp ó <p>&nbsp;</p>

dependiendo del caso.

Felicidad

caricatos · #6 (**permalink**) 19/04/2007, 10:53

Cita:

Iniciado por PatomaS

Hola gente

Bueno, la solución de caricatos ciertamente me parece original, no veo la relación, pero como bien dice, si funciona, funciona.

;)

Yo lo suelo hacer agregando un espacio en blanco a la capa

Ya sea

Código:

&nbsp ó <p>&nbsp;</p>

dependiendo del caso.

Felicidad

Hola:

No sé porqué no ves la relación...

Prueba este código en distintos navegadores:

<html>
<head>
<title>
ejemplo
</title>
<style type="text/css">
div {width: 3px; height: 3px; background-color: red;}
#capa2 {overflow: hidden}
</style>
</head>
<body >
<div id="capa1" ></div>
<br />
<div id="capa2" ></div>
</body>
</html>

Creo que tiene mucho que ver...

Saludos

PatomaS · #7 (**permalink**) 20/04/2007, 00:51

Hola nuevamente gente

Primero que nada, disculpas maestro por haberme expresado mal y parecer que dudada de tus conocimientos. No volverá a pasar ...

Decía lo de la relación basado en dos cosas
1.

Cita:

Iniciado por caricatos

(parece que no tiene que ver, pero así respeta el tamaño declarado)

2. La definición misma del overflow. La cual nos indica que su función es manipular o controlar los efectos de un objeto que se "desborda" fuera de los bordes de una caja.

Usando estas cosas como premisa y el hecho de que un fondo debe mostrarse solo hasta las dimensiones computadas para dicho fondo dentro del área de la caja o hasta los valores definidos en la repetición, tenemos que el comportamiento descrito no se ajusta a las definiciones de los elementos usados en las css. Es decir, es un comportamiento extraño o propio del explorer.

Pero sabemos que el modelo de caja del explorer se diferencia del del w3c en la inclusión del padding para la determinación de las dimensiones, por lo tanto, la caja es, en si, más grande que la imagen.

Si ahora tomamos en cuenta la definición y alcance de los fondos, vemos que el fondo debería incluir también al área del padding en el explorer, a pesar del fallo en sus medidas.

Pero no es eso lo que está pasando, y esto se debe a dos posibles causas, una discernible del código que nos muestra Calisco y una no directamente discernible, pero si previsible tomando en cuenta las costumbres de programación de la gente. La causa discernible, es el hecho de que la imagen está alineada al centro, como tiene unas dimensiones fijas y no se repite, queda un border generado por el padding, el margin y el border con sus valores por defecto, lo cual es la causa no directamente discernible.

Así que como creo que al estar respondiedo y hablando por msn me he hecho un lío, trataré de recapitular brevemente.

Creo que el problema está en la alineación de la imagen y el no controlar las propiedades de la caja (border, padding y margin). No creo que se problema del overflow porque no hay contenido desbordándose, la imagen de fondo no es considerada un elemento de contenido si no una propiedad con valor modificado de background-image: none a background-image: url(...).

Digo lo del cambio de propiedades del elemento, porque según la definición de background, los fondos no son una propiedad heredable, y por lógica, no tienen una url asignada, por lo que su valor es none en lo referente a background-image, confirmando así la transparencia de los fondos a menos que se defina un color o imagen.

Y mejor paro ya que hoy no estoy muy inspirado y terminaré haciendo esto más lioso.

Disculpas por el malentendido y por lo largo y enredado de este mensaje.

Felicidad