display: inline-block no funciona en IE8

isabelramirezmontoya · #1 (**permalink**) 12/03/2012, 17:47

Buenas tardes

Tengo el siguiente problema, les agradezco si me colaboran.

Tengo una pagina a la cual le inclui en las CSS la siguiente linea display: inline-block. El proposito de esta linea era que como la pagina es de tamaño variable con esta linea se ajustara a la altura. Sin embargo en IE6 y firefox funciona super bien, pero en IE8 no.

Tambien intente con height: auto pero no funciona en firefox

Alguien me puede decir por que no funciona display: inline-block, o si existe otra instruccion a este problema.

Gracias

Isabel

emprear · #2 (**permalink**) 12/03/2012, 18:10

@isabelramirezmontoya
Sería mejor que pases el código que estás usando y te genera el presunto problema, porque expresado como está , no lo entiendo para nada.
a qué elemento le diste display: inline-block ? a el html, al body, a un div?
Que cosa debería ajustarse a la altura?

Espero por detelles
Saludos

PD:
Estoy pidiendo muevan tu tema al foro de CSS. es mucho más apropiado

isabelramirezmontoya · #3 (**permalink**) 12/03/2012, 18:32

Mi codigo es el siguiente

<html>

<head>

<style>

#contenedor
{
width: 986px;
margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px;
padding: 0;
height: auto;
border: 0px solid green;
display: inline-block;
}

.contenido
{
float: left;
width: 600px;
margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px;
padding: 0;
height: auto;
border: 1px solid green;
}

</style>

</head>

<body class="body1">

<div id="contenedor">
<div class="contenido">

.....

</div>
</div>
</body>
</html>

El div contenido es el que varia de tamaño.

Antes de poner la line display: inline-block el contenido se desbordaba del contenedor, luego de que coloque la linea display: inline-block, quedo funcionando perfecto para IE6 y FIREFOX, sin embargo ayer me di cuenta que en IE8 el contenido se desborda del contenedor

Mejor dicho el div contenedor no cambia de altura segun la altura del div contenido.

Gracias

Isabel

djaevi · #4 (**permalink**) 12/03/2012, 18:41

Si tu unico proposito es que el div se autoajuste en lo que es la altura no hace falta que coloques la propiedad display, simplemente debes especificar el ancho del div y si quieres puedes ponerle tambien overflow:auto; que justamente lo que hace es decirle al div que al desbordar su altura se ajuste

kseso? · #5 (**permalink**) 13/03/2012, 11:56

Cita:

Iniciado por isabelramirezmontoya

Buenas tardes

Tengo el siguiente problema, les agradezco si me colaboran.

Tengo una pagina a la cual le inclui en las CSS la siguiente linea display: inline-block. El proposito de esta linea era que como la pagina es de tamaño variable con esta linea se ajustara a la altura. Sin embargo en IE6 y firefox funciona super bien, pero en IE8 no. <- inline-block define cómo se comporta la caja con relación a sus hermanos. Pese a mantener las propiedades intrínsecas a un elemento de bloque permite (si tiene anchura definida) que sus hermanos se posicionen a su lado (siempre que haya espacio disponible).

Tambien intente con height: auto pero no funciona en firefox <- height: auto es el valor por defecto de los bloques. Y sólo indica que su altura aumentará en función de su contenido.

Alguien me puede decir por que no funciona display: inline-block, o si existe otra instruccion a este problema. <- su problema viene del flotado del contenido. Busque por "limpiar float"

Gracias

Isabel

isabelramirezmontoya · #6 (**permalink**) 13/03/2012, 14:36

Gracias a todos por su colaboracion

Con el OVERFLOW que me sugirio djaevi quedo perfecto.

Gracias

Isabel