Problemas. Diferencias entre IE y Firefox en Posicionamiento de Capas

Celcius · #1 (**permalink**) 04/10/2006, 11:54

Holas,
Pues, quisiera que me echen una mano con un problema que tengo, primeramente quiero comentarles que me he leido bastantes manuales de posicionamiento y como que no lo entiendo muy bien pues yo siempre he estado haciendo pagianas con tablas

...

Lo que pasa es que este codigo se ve como yo quiero en internet explorer, pero en Firefox se ve totalmente distinto...

Código:

<!doctype html public "-//W3C//DTD HTML 4.01//EN">

<html>

   <head>
      <title>Ricky Blog</title>
      <link rel="stylesheet" type="text/css" href="estilos.css">
      <meta http-equiv="generator" content="PHP Designer 2005" />
   </head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
<div id="container">
    <div id="encabezado">
        <div id="izquierda"></div>
        <div id="derecha"></div>
        <div id="centro"></div>
    </div>
    <div id="frase"></div>
    <div id="cuerpo"></div>
    <div id="pie"></div>
</div>
</body>
</html>

y los estilos:

Código:

body {
  background-color: #FFFFFF;
  text-align:center;
  font: #000000 verdana, tahoma, arial;
  margin:0px;
}
#container {
  width: 780px;
  text-align:left;
  background-color:#F7F7F7;
  margin:auto;
}
#encabezado {
  background:white;
  width:780px;
  height:283px;
  margin:0px;
}
    #izquierda {
      width:257px;
      height:283px;
      background:url("images/lizquierdo.jpg") no-repeat;
      float:left;
    }
    #derecha {
      width:189px;
      height:283px;
      background:url("images/lderecho.jpg") no-repeat;
      float:right;
    }
    #centro {
      position:absolute;
      margin: 50px 0 0 20px;
      width:334px;
      height:283px;
      background:url("images/bautizo.jpg") no-repeat;
      float:center;
    }

Estoy seguro que ustedes saben que tengo que hacer para solucionarlo, pueden bajarse las imagenes que estoy usando desde http://rickyblog.pandela.net/pruebas/images.zip .

Vale aclarar que estoy aprendiendo y hago estas pruebas pues forman parte de mi aprendizaje... muchas gracias por tu valioso tiempo.

Celcius · #2 (**permalink**) 04/10/2006, 15:10

Aqui les paso mi cabecera en Internet Explorer:

y aqui en Firefox:

Si se dan cuenta, la imagen del bautizo se sobrepone al nombre del Blog (En firefox). Seguro que si saben, por favor, denme una mano que estoy bien perdido...

saludos...

renaco · #3 (**permalink**) 19/03/2008, 17:36

Hola, vi tu codigo, lo que pasa es que al momento de crear los estilos deben ser para clases osea debes cambiar los #clase por .clase y tambien debes fijar la posición de los divs (top y left) dependiendo de la ubicación de tus capas, por esa razón no esta ordenado en fireworks, en mi caso yo cuando desarrollo capas en firewors sale mejor que en internet.

Saludos

Renan Romero
www.romeroruiz.com

masterpuppet · #4 (**permalink**) 19/03/2008, 18:30

el problema esta en el #centro

#centro {
position:absolute;
margin: 50px 0 0 20px;
width:334px;
height:283px;
background:url("images/bautizo.jpg") no-repeat;
float:center;
}

en realidad ff esta renderizandolo bien el q hace cualquiera como siempre es el innombrable

. float center no existe , es right o left.
proba con esto:

#centro {
width:334px;
height:283px;
background:url("images/bautizo.jpg") no-repeat;
float:left;
}

salu2

pegasomx · #5 (**permalink**) 20/03/2008, 16:00

Agregale esto a tu encabezado para que sea mas compatible entre ambos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

No-NaMe · #6 (**permalink**) 21/03/2008, 22:08

Por comentar esto no es la solucion pero es una referencia para que tengas encuenta en el futuro, Firefox respeta los estandares de diseño web miestras que el internet explorer se los salta asi que yo que tu lo tendria encuenta tanto para buscar errores como para revisar tu web.

7koan · #7 (**permalink**) 28/03/2011, 04:21

Gracias Pegasomx, has salvado mi culo.