Mostrar Mensajes

Hola a todos!
Estoy elaborando un proyecto en PHP para la universidad, y tengo problemas en el diseño del index al momento de cargarlo en el mozilla y chrome!.

Pero, si lo cargo con IE y safari todo eta perfecto!

Creo que los errores nacen, porque no estoy usando el "float" y el "clear" adecuadamente. Asi que espero que me ayuden con esto.

A continuación comparto los códigos:
--------------------------------------------------------------
File: index.php

Código (php) [Seleccionar]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/style01.css">
</head>
    <body>
    <div id="div_top1">
      <div id="container_top1"></div>
    </div>
    <div id="div_top2">
      <div id="container_top2">C</div>
    </div>
    <div id="div_body">
      <div id="container_body">
        <div id="body_left">
          <div id="box1"></div>
          <div id="box2"></div>
        </div>
        <div id="body_right">
          <div id="box_a"></div>
          <div id="box_b"></div>
          <div id="box_c"></div>
        </div>
      </div>
    </div>
    <div id="div_footer">
      <div id="container_footer"></div>
    </div>
    </body>
</html>

--------------------------------------------------------------
File: style01.css

Código (css) [Seleccionar]


@charset "utf-8";
#div_top1 {
}
#div_top1 #container_top1 {
	width: 980px;
	margin-right: auto;
	margin-left: auto;
	background-color: #6C9;
	height: 100px;
}
#div_top2 {
}
#div_top2 #container_top2 {
	background-color: #900;
	width: 980px;
	margin-right: auto;
	margin-left: auto;
}
#div_body {
}
#div_body #container_body {
	background-color: #9F0;
	margin-right: auto;
	margin-left: auto;
	width: 980px;
	height: auto;
}
#div_body #container_body #body_left {
	width: 200px;
	background-color: #09F;
	float: left;
	clear: left;
	margin-top: 10px;
	height: auto;
}
#div_body #container_body #body_left #box1 {
	background-color: #669;
	height: 150px;
	width: 200px;
}
#div_body #container_body #body_left #box2 {
	background-color: #669;
	height: 150px;
	width: 200px;
	margin-top: 10px;
}
#div_body #container_body #body_right {
	background-color: #0CC;
	height: auto;
	width: 770px;
	float: left;
	margin-left: 10px;
	margin-top: 10px;
}
#div_body #container_body #body_right #box_a {
	height: 150px;
	width: 770px;
	background-color: #990;
}
#div_body #container_body #body_right #box_b {
	height: 200px;
	width: 380px;
	margin-top: 10px;
	background-color: #C09;
	float: left;
	margin-bottom: 10px;
}
#div_body #container_body #body_right #box_c {
	height: 200px;
	width: 380px;
	background-color: #C09;
	float: left;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	clear: none;
}
#div_footer {
}
#div_footer #container_footer {
	background-color: #036;
	margin-right: auto;
	margin-left: auto;
	width: 980px;
	height: 150px;
	clear: both;
}

--------------------------------------------------------------

Con todo esto, el index de ve asi en el mozilla:

Donde se puede observar que el background-color del #container_body es blanco.

Y si revisamos el css, tenemos que:

Código (css) [Seleccionar]


#div_body #container_body {
	background-color: #9F0;
	margin-right: auto;
	margin-left: auto;
	width: 980px;
	height: auto;
}

Por lo que el index debería ser de la siguiente forma (se ve asi en IE y safari):

Espero que me hayan entendido, y si tienen una mejor forma para trabajar el diseño del index me gustaría que me lo hagan saber.

.

Test Foro de elhacker.net SMF 2.1

Mensajes - saviture

Desarrollo Web / Re: Problemas al usar las propiedades de la etiqueta <div> en mozilla, ayuda xfavor!

Desarrollo Web / Problemas al usar las propiedades de la etiqueta <div> en mozilla, ayuda xfavor!