Problema con DIV en Firefox

[MikiBroki]

Buenas,

Tengo un div dentro de otro. El caso es que cuando inserto contenido en el que está dentro y el tamaño aumenta, en IE el DIV que lo contiene crece a lo alto abarcando al primero.

En cambio en FF no se adapta al alto del que contiene, y esto me supone un problema ya que no quiero usar barras de desplazamiento, ni demás opciones de "overflow"... ¿hay alguna forma de solucionarlo?

EDITADO: olvidé decir que funciona en FF pero cuando en el div que contiene al otro NO especifico un height (en IE funciona de todos modos).

Muchas gracias

[frijolerou]

En Firefox (y en general los que soportan min-height) la propiedad height define una altura fija. Lo que ocurre en IE (versión 6 hacia atrás) no está soportado min-height, y por tanto height asume ese comportamiento.

¿Soluciones?

A) Si no es necesario, no le definas una altura al DIV contenedor.

B) Si lo anterior no es posible, no uses height sino min-height, que será entendida por firefox, Ópera, IE 7, etc. En seguida define height mediante comentarios condicionales para que sólo lo lea IE 6 o menor.

Ejemplo:

Código HTML:

<style type="text/css">
#div_contenedor{
    min-height: 100px;
    }
</style>

<!--[if lte IE 6]>
#div_contenedor{
    height: 100px;
    }
<![endif]--> 

[Shade]

En realidad es que deberia funcionar asi... si tu le especificas un height al div principal forzosamente se deberia crear un scroll cuando el que tiene dentro es mas algo. Solucion... no poner height. O poner un overflow: hidden.

[MikiBroki]

gracias, muchas gracias a los dos.

[Mikmoro]

Si no he entendido mal la cuestión, en realidad esto se soluciona de la manera que ya se ha comentado muchas veces aquí:

hacer una clase que produzca el corte

.corte {clear:both;}

y justo después del div que estás dentro, antes de cerrar el contenedor, poner:

<div class="corte"></div>

Me pareció que era esta la cuetión que planteaba, pero igual estoy equivocado.

Mikel.

[MikiBroki]

mañana en cuento pruebe os comento, muchas gracias de nuevo

[MikiBroki]

Buenas de nuevo. El tema de clear:both no me ha servido (creo haberlo hecho corréctamente.

En cuanto a lo de que el alto del DIV exterior se ajustara al del interior, como habeis dicho lo solucioné con min-height con FF... pero como IE no lo soporta necesito averiguar qué navegador se está usando... puedo hacerlo con javaScript pero quisiera saber cómo se haría sólo con CSS.

En cuanto al ejemplo con el 'if' no me ha servido... pero desconocía su uso, ¿será quizás que no se puede usar dentro de la descripción de la clase?, ¿algún BUEN link que explique el uso de "sentencias" en CSS

Código:

.tamano {
    min-height:370px;
	
    <!--[if lte IE 6]>
        height:370px;
    <![endif]-->	
}

hmm... creo que será porque lo pongo en un fichero .css no .html, por los comentarios ¿?

Gracias a todos.

[frijolerou]

No, los comentarios condicionales tienes que incluirlos dentro del código HTML:

Código HTML:

<style type="text/css"> 
#div_contenedor{
    min-height: 100px; 
} 
</style>

<!--[if lte IE 6]>
<style type="text/css">
#div_contenedor{ 
    height: 100px; 
} 
</style>
<![endif]--> 

[Mikmoro]

Tengo la impresión de que estás equivocando el tiro, y hay algo que no estás haciendo bien. Si pones el código en cuestión, creo que será más fácil saber cuál es el problema y estoy seguro de que alguien te dará una solución definitiva en minutos

Mikel.

[MikiBroki]

Básicamente viene a ser lo siguiente. El problema inicial era que el contenido de "divContenido" se veía bien en IE definiendo un "height", pero en FF el texto se salía fuera (como en el ejemplo). Si se cambia "height" por "min-height" entonces funciona bien en ambos.

PERO el asunto es que tengo creada una clase para crear pestañas, y cada vez que se hace click en una de ellas se oculta un "divContenedor" (cada uno tiene su id, el siguiente código es un ejemplo de cómo debería funcionar), y se muestra el que corresponde a la pestaña actual.

Entonces, si para IE6 y anterior no establezco un "height", al hacer click en una pestaña cuyo "divContenedor" no tiene nada, se ve con unos pocos píxels de altura, y si hago click en otra con contenido el tamaño será mayor... y quiero poder establecer una altura mínima (por los que estén vacíos).

Código:

<html>
    <head>
        <link href="estilos.css" type="text/css" rel="styleSheet" />
    </head>
	
    <body>			
        <div id="divContenedor">
			
            <div id="divContenido">	    
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
	    </div>
			
	</div>
			
	</body>
</html>

El fichero "estilos.css":

Código:

#divContenedor {
    width:500px;

    background-color:red;
    padding:10px 10px 10px 10px;	
}


#divContenido {
    height:300px;
    width:400px;
	
    background-color:blue;
}

Lo que necesito es definir un "#divContenido" para IE y otro para FF... en el FICHERO DE ESTILOS... ya que si lo hago en el HEAD de la página FUNCIONA PERFECTAMENTE el método de frijolerou.

Si no puede hacerse, lo tendré que definir en la propia clase.

Muchas gracias !

[frijolerou]

Simplemente en mi ejemplo reemplaza el código CSS por el llamado a los ficheros (1 fichero normal y otro con extras para IE):

Código HTML:

<head>
<link href="estilos.css" type="text/css" rel="styleSheet" />

<!--[if lte IE 6]>
<link href="estilos_ie.css" type="text/css" rel="styleSheet" />
<![endif]-->
</head> 

[MikiBroki]

Es una opción que descarté por no tener código duplicado... y aunque también podría crear otros dos ficheros de estilos con sólo la clase necesaria para cada navegador, mejor pasarlo en tal caso como parámetro en el constructor de la clase.

Muchas gracias de nuevo !

[Mikmoro]

Prueba con este código:

Código:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <title>Columnas centradas</title>
  <style type="text/css">
#divContenedor { width:500px;
background-color:red;
padding:10px 10px 10px 10px;
height: auto ! important;
min-height:30px;
height:30px;
}
#divContenido {
height: auto ! important;
min-height:30px;
height:30px;
width:400px;
background-color:blue;
}
  </style>
</head>
<body>
<div id="divContenedor">
<div id="divContenido">	    
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
	    </div>
</div>
</body>
</html>

A ver si es lo que quieres. Es evidente que antes no había entendido tu problema.

Mikel.

[MikiBroki]

O yo me expliqué mal. Veo que pones en ambos dos veces "height" una vez con "auto" y otra con el número de píxeles, es correcto ?

[Mikmoro]

Sí, debe ser así. Para FF puedes poner un min-height y en el height auto, y de esa manera crecerá lo necesario, no pudiendo pasar de un tamaño mínimo. Pero esto IE no sabe hacerlo, y tomará el min-height como height, creciendo también como necesite, sin poder ser más pequeño que su height.
Como no queremos que los navegadores que funcionan bien crean que tienen un height determinado, con lo cuál no crecerían, le ponemos a height auto un ! important, lo que significa que debe prevalecer sobre cualquier otra regla del mismo nombre, de manera que leen el auto. Y de nuevo, como IE no sabe qué significa ! important, primero la lee, después lee el height sin más y no sabe dar más importancia a la que lleva important, de manera que lee la que dice sólo height (que debe ser puesta después, claro).

Es un bonito truco, y creo que es justo lo que necesitas. Ya dirás si estoy en lo cierto.

Mikel.

[frijolerou]

Mikbroki... en el ejemplo que puse con dos ficheros CSS no es necesario que lo tengas duplicado... en el segundo CSS basta con que incorpores los trucos para IE. aunque lo propuesto por mikmoro también vale.

[MikiBroki]

perfectísamente Mikmoro, he puesto "height:300px auto" en una sola sola línea (aunque funciona bien haciéndolo de dos veces también). No ha hecho falta poner "min-height" y funciona en ambos.

Muchísimas gracias a los dos !

[Mikmoro]

Me alegro. Ten en cuenta lo que te he explicado del ! important. Prueba con distintos tamaños de la caja (muy grandes, muy pequeñas, vacías), no te vayas a llevar alguna sorpresa.

Hasta la vista.

Mikel.

[richardmafia]

hola soy nuevo encontre esta web y veo que resuelven problemas con firefox el problema es que tengo una web que funciona bien con ie pero no funciona con firefox este es el codigo de css
#posi1{position:absolute; color:#0000bf; margin:-2pt 0pt 0pt -88pt; z-index:-1; text-align:center; marign:auto;}
cuando coloco en la pagina no aparece al centro si no a la izquierda
tambien tengo problemas con el javascript aunque se que este no es el tema no se si me pueden enviar una direccion para soluciones javascript en firefox gracias

[JavierB]

El mensaje original es de hace más de 1 año. Por favor, no reviváis temas tan antiguos.

Saludos,