Foros del Web » Creando para Internet » CSS »

Orden de los divs no funciona en FF pero si en IE

 Estas en el tema de Orden de los divs no funciona en FF pero si en IE en el foro de CSS en Foros del Web. Primero que nada decirles que estoy empezando con esto y estoy decidido a seguir hasta respetar los estandares de diseño web, bueno el punto mi ...
  #1 (permalink)  
Antiguo 11/12/2006, 11:54
Avatar de hanscruz  
Fecha de Ingreso: junio-2005
Mensajes: 278
Antigüedad: 18 años, 9 meses
Puntos: 0
Orden de los divs no funciona en FF pero si en IE
Primero que nada decirles que estoy empezando con esto y estoy decidido a seguir hasta respetar los estandares de diseño web, bueno el punto mi primer problema es que ya diseñe una estructura bsica de una web pero resulta que en IE la veo bien asi:



ahora en FF esta un desastre no entiendo por que tanta diferencia y en donde esta el error en FF se ve asi:

El formato correcto que quiero es el que se ve en IE ademas en FF no centra el div y en IE si.

los codigos son los siguientes:
del css:

Código PHP:
body
{
    font-family: Arial;
    font-size: 12px;
}
#centrador
{
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 10px;
    border: none;
}
#principal
{
    width: 700px;
    height: auto;
    border: 1px solid #FE070E;
}
.cabecera
{
    width: 700px;
    height: auto;
    border: 1px solid #000000;
    background: #E2F4FC;
}
.menuhorizontal
{
    width: 700px;
    height: auto;
    border: 1px solid #000000;
    background: #FFC000;
}
.menuvertical
{
    width: 150px;
    height: auto;
    border: 1px solid #000000;
    float: left;
    background-color: #FF9595;
}
.precargas
{
    width: 546px;
    height: auto;
    border: 1px solid #000000;
    float: right;
    background-color: #3CB371;
}
.contenidos
{
    width: 546px;
    height: auto;
    border: 1px solid #000000;
    float: right;
    color: #400040;
    background-color: #FFFBEC;
}
.pie
{
    width: 700px;
    height: auto;
    border: 1px solid #000000;
    background-color: #80FFFF;
} 

y del html es este:

Código PHP:
<html>
<head>
<title>Pagina nueva</title>
<link href="base.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="centrador">
<br>
<div id="principal">
<div class="cabecera">
<p>AQUI EL CONTENIDO DE LA CABECERA<br>aqui estara alguna imagen</p>
</div>
<div class="menuhorizontal">
<p>AQUI EL MENU HORIZONTAL<br>aqui los enlaces mas importantes y comunes</p>
</div>
<div class="menuvertical">
AQUI EL MENU VERTICAL
<ul>
<li>Opciones</li>
<li>Opciones</li>
<li>Opciones</li>
<li>Opciones</li>
<li>Opciones</li>
<li>Opciones</li>
<li>Opciones</li>
<li>Opciones</li>
</ul>
</div>
<div class="precargas">
<p>Aqui la precarga para las paginas</p>
</div>
<div class="contenidos">
<p>
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc.. 
</p>
</div>
<div class="pie">
<p>Aqui los datos del pie de pagina</p>
</div>
</div>
</div>
</body>
</html> 
ademas quiera saber como puedo ordnar los div uno debajo de otro segun el alto automatico, espero su ayuda
__________________
:policia:
Última edición por hanscruz; 11/12/2006 a las 12:01 Razón: ortografia
  #2 (permalink)  
Antiguo 11/12/2006, 13:36
Avatar de Ruben_JD  
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 218
Antigüedad: 20 años, 4 meses
Puntos: 7
Re: Orden de los divs no funciona en FF pero si en IE
coloca margin: auto; en #principal y pruebalo.
__________________
RubénJ. Regresando al foro despues de un par de años. A preguntar más de las novedades del foro.
  #3 (permalink)  
Antiguo 11/12/2006, 14:34
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 20 años, 7 meses
Puntos: 5
Re: Orden de los divs no funciona en FF pero si en IE
Es muy importante que NO todo DEBE ser elastico, ahi cosas que bien pueden ser definidas en px:

Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
body, html
{text-align: center;
font-family: Arial;
font-size: 12px;
}
#centrador
{ margin: 40px auto;
width: 665px;
height: 450px;
text-align: center;
font-size: 10px;
border: none;
}
#principal
{ float: left;
width: 700px;
height: auto;
border: 1px solid #FE070E;
}
.cabecera
{float: left;
width: 700px;
height: auto;
border: 1px solid #000000;
background: #E2F4FC;
}
.menuhorizontal
{float: left;
width: 700px;
height: auto;
border: 1px solid #000000;
background: #FFC000;
}
.menuvertical
{ width: 150px;
height: auto;
border: 1px solid #000000;
float: left;
background-color: #FF9595;
}
.precargas
{float: left;
width: 546px;
height: auto;
border: 1px solid #000000;
background-color: #3CB371;
}
.contenidos
{float: left;
width: 546px;
height: auto;
border: 1px solid #000000;
color: #400040;
background-color: #FFFBEC;
}
.pie
{
width: 700px;
float: left;
height: auto;
border: 1px solid #000000;
background-color: #80FFFF;
}

y del html es este:

</style>
</HEAD>
<body>
<div id="centrador">
<br>
<div id="principal">
<div class="cabecera">
<p>AQUI EL CONTENIDO DE LA CABECERA<br>aqui estara alguna imagen</p>
</div>
<div class="menuhorizontal">
<p>AQUI EL MENU HORIZONTAL<br>aqui los enlaces mas importantes y comunes</p>
</div>
<div class="menuvertical">
AQUI EL MENU VERTICAL
<ul>
<li>Opciones</li>
<li>Opciones</li>
<li>Opciones</li>
<li>Opciones</li>
<li>Opciones</li>
<li>Opciones</li>
<li>Opciones</li>
<li>Opciones</li>
</ul>
</div>
<div class="precargas">
<p>Aqui la precarga para las paginas</p>
</div>
<div class="contenidos">
<p>
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
Aqui los contenidos todo el texto e imagenes etc.. Aqui los contenidos todo el texto e imagenes etc..
</p>
</div>
<div class="pie">
<p>Aqui los datos del pie de pagina</p>
</div>
</div>
</div>
</body>
</html>
Estoy seguro que seras capas de darte cuenta de los cambios

Suerte
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #4 (permalink)  
Antiguo 14/12/2006, 08:39
Avatar de hanscruz  
Fecha de Ingreso: junio-2005
Mensajes: 278
Antigüedad: 18 años, 9 meses
Puntos: 0
Re: Orden de los divs no funciona en FF pero si en IE
Puse margin :auto; y solo me centro pero el pie de pagina si saliendo mal ahora el ejemplo de fearlex tampoco me soluciona el pie de pagina en firefox sigue saliendo desordenado y no puedo hacerlo salir bien como sale en ie.
Alguna otra sugerencia?
Gracias
__________________
:policia:
  #5 (permalink)  
Antiguo 14/12/2006, 12:03
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: Orden de los divs no funciona en FF pero si en IE
Solamente te falta poner esto en tu código, después del div de contenidos, justo encima del div del pie:

<br clear="all" />

O bien, hacer una clase que sea por ejemplo:

.clear { clear: both;}

y poner en ese lugar que te he dicho un div vacío:

<div class="clear"></div>

¿Por qué? Porque necesitas dar un corte al contenido si quieres que el siguiente div salga en la siguiente línea. En realidad quien está interpretando bien tu código es firefox, que coloca el div del pie en el siguiente lugar disponible a la izquierda, ya que no le has dicho que corte la línea y siga en la siguiente. Con este código que te pongo es eso lo que haces, y ahora lo interpreta como tú quieres.
Mikel.
  #6 (permalink)  
Antiguo 18/12/2006, 16:58
 
Fecha de Ingreso: diciembre-2006
Mensajes: 16
Antigüedad: 17 años, 4 meses
Puntos: 0
Re: Orden de los divs no funciona en FF pero si en IE
Hola, soy muy nuevo en esto de CSS, pero el problema de él no se soluciona escribiendo una etiqueta de <center> antes de el primer <div> ?

Saludos
  #7 (permalink)  
Antiguo 19/12/2006, 11:52
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: Orden de los divs no funciona en FF pero si en IE
No te has fijado bien. Por un lado su problema es que el div del pie no se coloca al pie, sino en la columna izquierda.
Y por otro lado, se tiende a que en la maquetación con css se eliminen todas las etiquetas de formato del código html, para que sea sólo contenido estructurado, y los formatos se apliquen desde css. Si no hubiera otra solución estaría bien, pero la hay y se aplica desde css.

Mikel.
  #8 (permalink)  
Antiguo 19/12/2006, 12:54
 
Fecha de Ingreso: diciembre-2006
Mensajes: 16
Antigüedad: 17 años, 4 meses
Puntos: 0
Re: Orden de los divs no funciona en FF pero si en IE
Ah, ok, esque todavía no alcanzo a entender todos los códigos, pero de ayer a hoy aprendí bastantes cosas. Gracias por tu respuesta. Saludos
  #9 (permalink)  
Antiguo 21/12/2006, 11:41
Avatar de hanscruz  
Fecha de Ingreso: junio-2005
Mensajes: 278
Antigüedad: 18 años, 9 meses
Puntos: 0
Re: Orden de los divs no funciona en FF pero si en IE
Gracias por tu respuesta amigo me sirvio de mucho y me servira mas aun el otras problemillas parecidos que tenia, saludos.
__________________
:policia:
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:21.