Comunidad de diseño web y desarrollo en internet online

Problemas con contenido dinamico en CSS explorer y firefox

Citar            
MensajeEscrito el 06 Feb 2009 01:43 am
Hola que tal tengo un problemon, para crear un fondo con diferentes aspectos hice divs anidados para hacerlo, despues cree dos divs uno que es cabezera y otro cuerpo, en la cabezera creo que no tengo problema ya que meto saltos de linea y mi fondo baja muy bien pero en el div "todocuerpo" y meto dos divs uno llamado "derecho" con la propiedad de float:rigth y otro "izquierdo" float: left, el problema es que se pierde en explorer se ve bien pero en firefox no
el codigo html es este:

Código :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<div id="container" >
   <div id="solidIzquierda">
       <div id ="solidDerecha">
         <div id="topCentro">
            <div id="esquinaDerecha">
               <div id ="esquinaIzquierda">
                  <div id = "botCentro">
                     <div id="abajoDerecha">
                        <div id="abajoIzquierda">
                                  <div id ="header">
                                         <div id = "todo">
                                                   <div id = "logo">Aqui va el logo</div> 
                                                    <div id = "derecha">
                                                       <div id = "leyenda">Lider Mundial en Nutricion Infantil</div>
                                                       <div id = "menu">INTERNACIONAL | NOTICIAS Y COMUNICADOS | CONTACTO |  MAPA DEL SITIO </div>
                                                     </div>
                                       </div>
                                        <div id="bannerflash"></div>
                                    </div>
                                  <div id = "cuerpo">
                                        <div id="todocuerpo">
                                             <div id="submenu">Aqui va el submenu</div>
                                            <div id="izquierdo"> Izquiero
                                            <br>
                                            <br>
                                            <br>
                                            <br>
                                            <br>
                                            <br>
                                            <br>
                                            <br>
                                            <br>
                                            </div>
                                            <div id="derecho">Derecho</div>
                                       </div>
                                  </div>
                                  
                        </div><!--abajoizquierda-->
                     </div><!--abajoderecha-->
                  </div><!--botcentro-->
               </div><!--Esquinaizquierda-->
              </div><!--EsquinaDerecha-->
            </div><!--topCentro-->
        </div><!--Solido derecha-->
    </div><!-- solido izquierda--> 
</div><!--Contenedor principal-->
<div id="footer">
<p id="footer-bottomline">
 2008 TODOS LOS DERECHOS RESERVADOS | Mead Johnson Nutricionales. S. de R.L. de C.V. | Política de Seguridad</p>
</div>
</body>
</html>

y la hoja de estilos es esta:

Código :

body 
{
   margin-left: 0px;
   margin-top: 28px;
   margin-right: 0px;
   margin-bottom: 0px;
   background-color:#BCDAE7;
   background-image: url(../Images/g_bg01.jpg);
   background-repeat: repeat-x;
   font: 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
   color: #333;
   text-align:center;
   height:auto;
}

h3
{
   font-size: 130%;
   font-weight: bold;
}

a
{
   color: #039;
   text-decoration: none;
}

a:hover
{
   text-decoration: underline;
}

img
{
   border: 0;
}
/* contenedor */
#container
{
   margin:0 auto;
   background:#EDF8FA;
   width: 950px;
   height:auto;
   /*z-index:10;
   filter:alpha(opacity=60);
   -moz-opacity:.60;
   opacity:.60;*/
}
#esquinaDerecha {
   background-image:url(../Images/g_caja_esqTopIzq.jpg);
   background-repeat: no-repeat;
     background-position: top left;
   
}
#topCentro{
   background-image:url(../Images/g_caja_TopCentro.jpg);
   background-repeat:repeat-x;
}
#botCentro {
   background-image:url(../Images/g_caja_botCentro.jpg);
   background-repeat:repeat-x;
   background-position:bottom right;

}
#solidIzquierda{
   background-image:url(../Images/g_caja_centroIzq.jpg);
   background-repeat:repeat-y;
}
#solidDerecha {
   background-image:url(../Images/g_caja_centroDer.jpg);
   background-repeat:repeat-y;
   background-position:top right;
}
#esquinaIzquierda {
   background-image:url(../Images/g_caja_esqTopDer.jpg);
   background-repeat:no-repeat;
   background-position: top right;
}
#abajoIzquierda {
   background-image:url(../Images/g_caja_esqBotDer.jpg);
   background-repeat:no-repeat;
   background-position:bottom right;
}
#abajoDerecha{
   background:url(../Images/g_caja_esqBotIzq.jpg);
   background-repeat:no-repeat;
   background-position:bottom left;
}
/* header */
#header {
   width:890px;
   height: auto;
   margin: 0 auto;
   padding-top: 27px;
}
#todo{
   background:#FFFFFF;
   width:890px;
   /*height:80px;*/
   height:80px;
}
#derecha {
   background:#99FF66;
   float:right;
   width:380px;
   height:auto;
}
#logo {
   background:#669999;
   width: 200px;
   height: 70px;
   float:left;
}
#leyenda {
   background:#669999;
   width:200px;
   height:auto;
   float:right;
   text-align:center;
   margin-top:30px;
}
#menu {
   background:#66CCCC;
   width: 370px;
   height: 25px;
   float: right;
   font: 10px Arial, Helvetica, sans-serif;
   font-weight:bold;
   text-transform:uppercase;
}

#bannerflash{
   background:#CCCCFF;
   width:890px;
   /*height:253px;*/
   height:150px;
   text-align:center;
   ;
}
/*Cuerpo*/
#cuerpo {
   width:890px;
   margin: 0 auto;
   height:auto;
   padding-top: 10px;
}
#todocuerpo{
    background:#CCCCCC;
   width:890px;
   border:1px solid #999999;
   height:auto;

}
#submenu{
    background:#FFFFFF;
   width: 890px;
   height: 46px;
   font:Arial, Helvetica, sans-serif;
   font-size:10px;
   font-weight:bold;
}
#izquierdo {
    background:#6699FF;
   width:590px;
   height: auto;
   margin-top:4px;
   float:left
}

#enlace{
   background:#CCCC00;
   width:574px;
   height:176px;
   text-align:center;
   margin-left: 12px;
   margin-right: 4px;
   margin-top:422px;
   margin-bottom:12px;
}
#derecho {
   background:#BCDAE7;
   width:292px;
   height:auto;
   margin-top:4px;
   float:right;
}
#buscar {
   background:#666666;
   width:267px;
   height: 30px;
}

.margenes{
   margin-left:12px;
   margin-right:12px;
   margin-top:4px;
}
#cabezilla {
   background:#003366;
   width:590px;
   height:65px;
}
#cuerpecillo {
   background:#999900;
   width:590px;
   height:480px;
}
#piecillo {
   background:#006600;
   width:590px;
   height:65px;
}
/*Pie donde va la imagen de fin*/
#pie{
   background:#666666;
   width:900px;
   margin: 0 auto;
   height: auto;
}
/*Footer */
#footer
{
   height: 30px;
   color: #015792;
   background-color:#CEEAEE;
   text-align: center;
   font-size:10px;
   font-weight: bold;
   width: 100%;
   margin-top: 15px;
   clear:both;
}
#footer a {   
   color: #015792;   
   font-weight: bold;
   text-decoration: none;
}
#footer a:hover,#footer a:active,#footer a:focus {
   color: #3B464A;   
   font-weight: bold;
   text-decoration: none;
}
#footer-bottomline {
   color:#015792;
   font-size:12px;
   font-weight: bold;
   text-decoration: none;
   vertical-align:middle;
}
#footer-bottomline a{
   color:#015792;
   font-size:10px;
   text-decoration: none;
}


si quieren ver como se ejecuta la paguina es :
[url=]
http://www.greenglobal.com.mx/Josue/Mead/index3.html
[/url]
en explorer se ve bien pero en mozila no , espero que me digan en que estoy mal

Por joshuavw

Claber

306 de clabLevel



Genero:Masculino  

Juego, aprendo y programo

msie7
Citar            
MensajeEscrito el 06 Feb 2009 01:57 am
Siempre cuando trabajes con flotantes, hay que colocar un clear:both; despues del ultimo flotante para anularlos en el elemento que sigue, sino es como que el contenido que sigue seguira flotando. Solo crea una clase en tu css:

Código HTML :

.clear {clear:both}


Y justo debajo de tu div "derecho" despues de su cierre </div> crea otro div vacio con esta nueva clase

Código HTML :

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


El clear anula los flotantes, asi el contenido que este debajo de ellos seguira un flujo normal.

Por drarock

Claber

705 de clabLevel

3 tutoriales

Genero:Femenino  

Lima, Peru

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.