Foros del Web » Creando para Internet » CSS »

Problemas con DIV en Firefox

Estas en el tema de Problemas con DIV en Firefox en el foro de CSS en Foros del Web. Buen dia para todos... y de antemano muchas gracias al que me pueda colaborar. mi problema radica en lo siguiente: Tengo el siguiente codigo HTML ...
  #1 (permalink)  
Antiguo 16/09/2010, 14:59
Avatar de jotaincubus  
Fecha de Ingreso: mayo-2005
Ubicación: Medellin - Colombia
Mensajes: 1.797
Antigüedad: 12 años, 6 meses
Puntos: 394
Problemas con DIV en Firefox

Buen dia para todos... y de antemano muchas gracias al que me pueda colaborar.

mi problema radica en lo siguiente:

Tengo el siguiente codigo HTML con el cual quiero colocar 3 DIV (IZQUIERDA - CENTRO - DERECHA) uno al lado del otro dentro de un DIV contenedor

Código HTML:
<div id="contenedor">
	
	<div id="superior">
		<span>hola</SPAN>
	</div>
	
	<div id="arriba">
		<span>hola</span>
	</div>

	<div id="izquierda">
		<span>hola</span>
	</div>

	<div id="centro">
		<span>hola</span>
	</div>

	<div id="derecha">
		<span>hola</span>
	</div>

	<div id="abajo">
		<span>hola</span>
	</div>

Y el siguiente codigo CSS

Código:
#contenedor {
border:1px solid black;
margin:0;
padding:0;
width:1050px;
}

	#superior {
	border:1px solid black;
	margin:5px;
	width:99%;
	clear:both;
	}

	#arriba {
	border:1px solid black;
	margin:5px;
	width:99%;
	clear:both;
	}

	#izquierda {
	float:left;
	border:1px solid black;
	padding:5px;
	margin:20px 5PX 10PX 5PX;
	width:20%;
	}

	#centro {
	float:left;
	border:1px solid black;
	padding:5px;
	margin:20px 5PX 10PX 5PX;
	width:57%;
	}

	#derecha {
	float:left;
	border:1px solid black;
	padding:5px;
	margin:20px 5PX 10PX 5PX;
	width:20%;
	}

	#abajo {
	border:1px solid black;
	margin:5px;
	width:99%;
	clear:both;
	}
En INTERNET EXPLORER va de lujo... pero en FIREFOX el DIV DERECHO me aparece en la parte de abajo, no se acomoda al lado derecho del DIV CONTENEDOR, ni colocandole FLOAT:RIGHT La verdad no entiendo porque si el porcentaje total de los 3 es de 97% si esto es asi, tendria espacio suficiente para los MARGIN de los tres y se me colocarian los 3 horizontalmente. Pero en FIREFOX no funciona.

Muchas gracias por su ayuda.

Juan Esteban
__________________
Por que existe gente que no agradece después de que se le ha brindado tiempo y ayuda ???
  #2 (permalink)  
Antiguo 16/09/2010, 15:06
 
Fecha de Ingreso: septiembre-2010
Ubicación: In my dreams ^^
Mensajes: 18
Antigüedad: 7 años, 2 meses
Puntos: 0
Respuesta: Problemas con DIV en Firefox

Pues en los códigos no vi ningun error pero el problema podría estar en que firefox tenga una interfaz como navegador más grande, más que un problema de tu web es que no es el mismo tamaño la interfaz de IE que la de Firefox.

Una sugerencia: Prueba con el Zoom de Firefox para ver si al alejarlo más (talvez a un 130%) el div se acomoda correctamente, si no es así ya tendrás la certeza de que es un problema de Web.

Continuare pasando por el tema para ver si tu problema se soluciono o no.

¡Suerte!

AlejandroM!
DigInDreams LSC - Aprende haciéndolo™ [[email protected]]
  #3 (permalink)  
Antiguo 16/09/2010, 15:17
Avatar de jotaincubus  
Fecha de Ingreso: mayo-2005
Ubicación: Medellin - Colombia
Mensajes: 1.797
Antigüedad: 12 años, 6 meses
Puntos: 394
Respuesta: Problemas con DIV en Firefox

Muchas gracias por responder e interesarte en mi tema... te cuento que aumente el zoom del FIREFOX pero sigue el mismo problema... Te cuento que cuando bajo los porcentajes del width a IZQUIERDA 19% CENTRO 54% DERECHA 19% me los organiza bien, pero en INTERNET EXPLORER se ven horrible porque esos pierden simetria con los de arriba y abajo (quedan mas pequeños)

Ayudenme por favor llevo dos dias en esto y nada que me funciona...
__________________
Por que existe gente que no agradece después de que se le ha brindado tiempo y ayuda ???
  #4 (permalink)  
Antiguo 16/09/2010, 18:26
Avatar de matius  
Fecha de Ingreso: julio-2005
Ubicación: Mexico, D.F.
Mensajes: 554
Antigüedad: 12 años, 4 meses
Puntos: 2
Respuesta: Problemas con DIV en Firefox

Ni entiendo, porque si trabajas con un contenedor definido en pixeles, usas porcentajes en tus otros div. Porque además. no has definido todos los parámetros de referencia de los porcentajes y eso dará errores.

La forma en que lo resolví con tu configuración:
El margin del centro no debe tener margin a la derecha e izquierda (o sea 0px), el div derecha debe flotar a la derecha y no debe contener margin a la izquierda (o sea 0px).

Con el valor margin derecho del div izquierdo es como estableces la separación de div central con el div izquierdo y derecho.

Y pues a mi me funciono en todos los navegadores

Código HTML:
<html>
<head>

<style type="text/css">

body
{
margin:0;
padding:0;
}

#contenedor { border:solid 1px #000033;
margin:0 auto; /* remueve auto si no deseas centrarlo*/
padding:0; width:1050px;

}

#superior {
	border:1px solid black;
	margin:5px;
	width:99%;
	clear:both;
	}

	#arriba {
	border:1px solid black;
	margin:5px;
	width:99%;
	clear:both;
	}


	#izquierda {
	float:left;
	position:relative; /* mover en relación al flujo de div*/
	border:1px solid black;
	margin:10px 8px 5px 5px; /* el segundo valor es el que define la separación del centro*/
	padding:5px;
	width:20%;
	}

	#centro {
	float: left;
        position: relative;
	border:1px solid black;
	padding:5px;
	margin:10px 0 5px; /* el centro debe tener un valor de 0 en margin-right y margin-left*/
	width:54%;
	}

	#derecha {
	float:right;
	position:relative;
	border:1px solid black;
	padding:5px;
	margin:10px 5px 5px 0; /* la derecha debe tener un valor de 0 en margin-left*/
	width:20%;
	}

	#abajo {
	border:1px solid black;
	margin:5px 5px;
	width:99%;
	clear:both;
	}

</style>

</head>

<body>

<div id="contenedor">
	
	<div id="superior">
		<span>hola</SPAN>
	</div>
	
	<div id="arriba">
		<span>hola</span>
	</div>

	<div id="izquierda">
		<span>hola</span>
	</div>

	<div id="centro">
		<span>hola</span>
	</div>

	<div id="derecha">
		<span>hola</span>
	</div>
    
	<div id="abajo">
		<span>hola</span>
	</div>

	
<div style="clear:both"></div>
</div>

</body>
</html> 

Última edición por matius; 16/09/2010 a las 18:34
  #5 (permalink)  
Antiguo 17/09/2010, 09:57
Avatar de jotaincubus  
Fecha de Ingreso: mayo-2005
Ubicación: Medellin - Colombia
Mensajes: 1.797
Antigüedad: 12 años, 6 meses
Puntos: 394
Respuesta: Problemas con DIV en Firefox

Hermano muchisimas gracias... por personas como usted es que uno sale adelante en los problemas... se le agradecera eternamente...
__________________
Por que existe gente que no agradece después de que se le ha brindado tiempo y ayuda ???
  #6 (permalink)  
Antiguo 18/09/2010, 02:35
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problemas con DIV en Firefox

Hola:

El problema es fácil de entender, estriba en la diferencia a la hora de calcular el ancho de una caja:

Firefox: width+padding+border+margin.
Explorer: width+padding+border.

La primera (Firefox) cumple con la estandarización w3c, la segunda no.

Saludos.


Última edición por jomaruro; 22/09/2010 a las 15:41 Razón: Corrección ortográfica
  #7 (permalink)  
Antiguo 20/09/2010, 22:27
Avatar de jotaincubus  
Fecha de Ingreso: mayo-2005
Ubicación: Medellin - Colombia
Mensajes: 1.797
Antigüedad: 12 años, 6 meses
Puntos: 394
Respuesta: Problemas con DIV en Firefox

Wow eso si que es una respuesta concreta... muchas gracias por el dato tecnico, es bueno saber desde lo basico porque se genera el problema...

Muchas gracias
__________________
Por que existe gente que no agradece después de que se le ha brindado tiempo y ayuda ???

Etiquetas: firefox
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 07:53.