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

saviture · 25 Abril 2011, 00:20 AM

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.

.

#!drvy · 25 Abril 2011, 16:34 PM

Hola, donde terminan body_left y body_right (estos 2 usan float) debes limpiar el float. Yo lo hice a lo rápido así que añadí otro div en el html y una linea en el css.

queda así:

index.php

Código (html4strict,26) [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">dasd</div>
          <div id="box2">dsad</div>
        </div>
        <div id="body_right">
          <div id="box_a"></div>
          <div id="box_b"></div>
          <div id="box_c"></div>
        </div>
  <div class="clear"></div>
      </div>
    </div>
    <div id="div_footer">
      <div id="container_footer"></div>
    </div>
    </body>
</html>

style01.css

Código (css,89) [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 #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;
}
#div_body {
}
#div_body #container_body {
 background-color:#9F0 !important;
 margin-right: auto;
 margin-left: auto;
 width: 980px;
 height: auto;
}
.clear {clear:both;}

Saludos

saviture · 26 Abril 2011, 16:06 PM

drvy | BSM gracias por la ayuda, nose me habia ocurrido limpiar el float.

Test Foro de elhacker.net SMF 2.1

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

saviture

#!drvy

saviture