Foros del Web » Creando para Internet » CSS »

dimesion de div con background

Estas en el tema de dimesion de div con background en el foro de CSS en Foros del Web. Tengo este estilo de clase Código PHP:         {      width :  550px ;      height :  17px ;      background :  #FFF url('_imgs/post01.jpg') no-repeat center;      }  ...
  #1 (permalink)  
Antiguo 18/04/2007, 14:25
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 13 años, 9 meses
Puntos: 4
dimesion de div con background

Tengo este estilo de clase
Código PHP:
       {
    
width550px;
    
height17px;
    
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
__________________
| Cabeza De Raton |
  #2 (permalink)  
Antiguo 18/04/2007, 20:10
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Re: dimesion de div con background

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
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 18/04/2007, 20:39
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 13 años, 9 meses
Puntos: 4
Re: dimesion de div con background

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.
__________________
| Cabeza De Raton |
  #4 (permalink)  
Antiguo 18/04/2007, 23:40
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: dimesion de div con background

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 19/04/2007, 01:12
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Re: dimesion de div con background

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
__________________
¡ hey, hou, hou, hey !
  #6 (permalink)  
Antiguo 19/04/2007, 11:53
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: dimesion de div con background

Cita:
Iniciado por PatomaS Ver Mensaje
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 20/04/2007, 01:51
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Re: dimesion de div con background

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
__________________
¡ hey, hou, hou, hey !
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 23:51.