Foros del Web » Creando para Internet » CSS »

Problema con DIV en Firefox

Estas en el tema de Problema con DIV en Firefox en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/01/2007, 07:40
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Problema con DIV en Firefox

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

Última edición por MikiBroki; 09/01/2007 a las 07:47
  #2 (permalink)  
Antiguo 09/01/2007, 09:32
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Re: Problema con DIV en Firefox

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]--> 
__________________
El conocimiento es libre: Movimiento por la Devolución
  #3 (permalink)  
Antiguo 09/01/2007, 09:45
Avatar de Shade  
Fecha de Ingreso: noviembre-2006
Mensajes: 262
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Problema con DIV en Firefox

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.
  #4 (permalink)  
Antiguo 09/01/2007, 11:04
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Problema con DIV en Firefox

gracias, muchas gracias a los dos.
  #5 (permalink)  
Antiguo 09/01/2007, 13:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Problema con DIV en Firefox

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.
  #6 (permalink)  
Antiguo 09/01/2007, 13:39
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Problema con DIV en Firefox

mañana en cuento pruebe os comento, muchas gracias de nuevo
  #7 (permalink)  
Antiguo 12/01/2007, 07:33
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Problema con DIV en Firefox

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.

Última edición por MikiBroki; 12/01/2007 a las 07:46
  #8 (permalink)  
Antiguo 12/01/2007, 13:06
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Re: Problema con DIV en Firefox

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]--> 
__________________
El conocimiento es libre: Movimiento por la Devolución
  #9 (permalink)  
Antiguo 12/01/2007, 13:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Problema con DIV en Firefox

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.
  #10 (permalink)  
Antiguo 12/01/2007, 14:14
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Problema con DIV en Firefox

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 !
  #11 (permalink)  
Antiguo 12/01/2007, 15:11
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Re: Problema con DIV en Firefox

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> 
__________________
El conocimiento es libre: Movimiento por la Devolución
  #12 (permalink)  
Antiguo 12/01/2007, 15:25
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Problema con DIV en Firefox

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 !

Última edición por MikiBroki; 12/01/2007 a las 15:33
  #13 (permalink)  
Antiguo 12/01/2007, 15:40
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Problema con DIV en Firefox

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.
  #14 (permalink)  
Antiguo 12/01/2007, 15:49
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Problema con DIV en Firefox

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 ?
  #15 (permalink)  
Antiguo 12/01/2007, 16:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Problema con DIV en Firefox

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.
  #16 (permalink)  
Antiguo 12/01/2007, 17:44
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Re: Problema con DIV en Firefox

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.
__________________
El conocimiento es libre: Movimiento por la Devolución
  #17 (permalink)  
Antiguo 13/01/2007, 03:45
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Problema con DIV en Firefox

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 !
  #18 (permalink)  
Antiguo 13/01/2007, 04:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Problema con DIV en Firefox

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.
  #19 (permalink)  
Antiguo 05/12/2008, 10:14
 
Fecha de Ingreso: diciembre-2008
Mensajes: 75
Antigüedad: 9 años
Puntos: 1
Respuesta: Problema con DIV en Firefox

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
  #20 (permalink)  
Antiguo 05/12/2008, 10:35
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Respuesta: Problema con DIV en Firefox

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

Saludos,
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.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 23:37.