Bug en Firefox.

Citar

Escrito el 23 Jul 2012 05:14 pm

Hola estaba haciendo una practica de HTML y CSS que me dejaron en la U. Tenia que hacer esto (Solo lo del centro): [url=http://img703.imageshack.us/img703/809/layoutjc.jpg][/url] ya lo hice y se ve bien en Opera, Chrome e IE. Pero en firefox la segunda fila me hace margin arriba y abajo. Por alguna razon el contenedor que "contiene" las 6 cajas hace margin abajo y arriba apesar de que deberia hacerlo solo abajo. Alguien tiene alguna idea del por qué ocurre? Les dejo el html y css en codigo

Código HTML :

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/index.css"/>
<title>Practica Layout</title>
</head>
<body>
 <div id="header" class="cyan4">
 </div>
 <div id="main">
  
  <div class="container1">
    <div class="cyan1 box1"></div>
    <div class="cyan2 box1"></div>
    <div class="cyan3 box1"></div>
    <div class="cyan4 box1"></div>
    <div class="cyan5 box1"></div>
    <div class="cyan6 box1"></div>
    <div class="clearer box1"></div>
  </div>
  
  <div class="container1">
    <div class="cyan1 box2"></div>
    <div class="cyan2 box2"></div>
    <div class="clearer"></div>
  </div>
  
  <div class="cyan6 container3 box1">    
  </div>
  <div class="clearer"></div>

  <div class="container4">
    <div class="cyan6 box1"></div>
    <div class="cyan1 box1"></div>
  </div>
  <div class="clearer"></div>


 </div>
 <div id="footer" class="cyan6">

 </div>
</body>
</html>

Código CSS :

body{margin: 0 auto; width: 960px;}

#header
{
   border-bottom: 7px solid #a6a8a5;
   height: 193px;
}

#footer
{
   border-top: 7px solid #82d0f7;
   height:193px;
}

.box1
{
   height: 200px;
   width: 160px;
}

.box2
{
   height: 200px;
   width: 480px;
}

.container1
{
   margin-bottom: 10px;
}

.container1 div
{
   float: left;   
}

.container2
{
   margin-bottom:200px;   
}

.container3
{
   float: right;
   margin-bottom: 11px;
}

.container4 div:first-child
{
   float: left;
}

.container4 div:last-child
{
   float: right;
}

.cyan1{background-color:#d3edfc;}
.cyan2{background-color:#bbe4fa;}
.cyan3{background-color:#a1daf7;}
.cyan4{background-color:#82d0f6;}
.cyan5{background-color:#5ac6f4;}
.cyan6{background-color:#21bbef;}

/*Generic Classes*/
div.clearer{clear:both;width:0!important;float:none!important;height:0!important}

Gracias de antemano!.

Por criperro

1 de clabLevel

Envíale un mensaje privado

Bug en Firefox.

Escribe una respuesta rapida