Tema: Efecto raro en los DIV
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/11/2014, 18:01
JimmyBrain
 
Fecha de Ingreso: noviembre-2014
Mensajes: 46
Antigüedad: 9 años, 5 meses
Puntos: 0
Efecto raro en los DIV
Hola tengo un problema con el siguiente codigo :


El HTML

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin t&iacute;tulo</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <center>
  11.       <div class="container">
  12.         <div class="banner">
  13.           <p><img src="logo.png" width="507" height="100" /></p>
  14.         </div>
  15.         <div class="box">
  16.           <div class="menu">
  17. <div class="categorias">
  18. <h3>Categorias</h3>
  19. <div class="categorias_body">
  20.   Link1<br />
  21.   Link2<br />
  22.   Link3<br />
  23.   Link4<br />
  24.   Link5<br />
  25.   Link6<br />
  26.   Link7<br />
  27.   Link8<br />
  28.   Link9<br />
  29.   Link10<br />
  30.   </div>
  31. </div>
  32.           </div>
  33.           
  34.      
  35. <div class="body">
  36.  
  37. <div class="post">
  38. <h3>Noticia1</h3>
  39. <div class="post_body">
  40.   <p>Contenido de Noticia1</p>
  41.   </div>
  42. </div>
  43.  
  44. <div class="post">
  45. <h3>Noticia2</h3>
  46. <div class="post_body">
  47.   <p>Contenido de Noticia2</p>
  48.   </div>
  49. </div>
  50.  
  51. <div class="post">
  52. <h3>Noticia3</h3>
  53. <div class="post_body">
  54.   <p>Contenido de Noticia3</p>
  55.   </div>
  56. </div>
  57.  
  58. <div class="post">
  59. <h3>Noticia4</h3>
  60. <div class="post_body">
  61.   <p>Contenido de Noticia4</p>
  62.   </div>
  63. </div>
  64.  
  65. <div class="post">
  66. <h3>Noticia5</h3>
  67. <div class="post_body">
  68.   <p>Contenido de Noticia5</p>
  69.   </div>
  70. </div>
  71.  
  72. </div>
  73.  
  74.  
  75.           <div class="otromenu">
  76. <div class="categorias">
  77. <h3>Afiliados</h3>
  78. <div class="categorias_body">
  79.   Link1<br />
  80.   Link2<br />
  81.   Link3<br />
  82.   Link4<br />
  83.   Link5<br />
  84.   Link6<br />
  85.   Link7<br />
  86.   Link8<br />
  87.   Link9<br />
  88.   Link10<br />
  89.   </div>
  90. </div>
  91.           </div>
  92.         </div>
  93.         <div class="footer">
  94.           <p><img src="logo.png" width="507" height="100" /></p>
  95.         </div>
  96.   </div>
  97. </center>
  98. </body>
  99. </html>

El CSS

Código: 
body {
background:transparent url(fondo.jpg) repeat scroll 0 0;
color:gray;
font-family:helvetica,arial,sans-serif;
font-size:14px;
text-align:center;
}

.container {
	height: 768px;
	width: 1050px;
}
.banner {
	min-height: 100px;
	float: left;
	width: 1024px;
	background-color:#000;
	border: solid #222 2px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin: 3px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
.box {
	float: left;
	min-height: 500px;
	width: 1024px;
	background-color:#000;
	border: solid #222 2px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin: 3px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
.menu {
	float: left;
	min-height: 500px;
	width: 200px;
	margin-top: 3px;
	margin-right: 3px;
	margin-bottom: 3px;
	margin-left: 3px;

}

.body {
	float: left;
	min-height: 500px;
	width: 600px;
	margin: 3px;
}
.otromenu {
	float: left;
	min-height: 500px;
	width: 200px;
	margin: 3px;
}

.footer {
	float: left;
	min-height: 100px;
	width: 1024px;
	background-color:#000;
	border: solid #222 2px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin: 3px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;

}

.categorias {
color:gray;
margin-bottom:10px;
width:200px;
word-wrap: break-word;

}

.categorias h3 {
color:orange;
background:#0F0F0F;
border-width: 1px;
border-style:solid;
border-color:333333; 
padding:5px 10px;

}

.categorias_body {
margin:-20px 0 0 0;
color:white;
background:black;
line-height:19px;
padding:5px 10px;
border-width: 1px;
border-style:solid;
border-color:333333;

}

.post {
color:gray;
margin-bottom:10px;
width:600px;
word-wrap: break-word;

}

.post h3 {
color:orange;
background:#0F0F0F;
border-width: 1px;
border-style:solid;
border-color:333333; 
padding:5px 10px;

}

.post_body {
margin:-20px 0 0 0;
color:white;
background:black;
line-height:19px;
padding:5px 10px;
border-width: 1px;
border-style:solid;
border-color:333333;

}
Cuando la cargo la primera vez en firefox se ve asi :



Pero cuando lo cargo como 3 veces seguidas se ve bien :



El tema es que en crome y IE se ve mal como siempre pero en firefox despues de 3 veces se mal , mi idea es que se vea como en la primer imagen.

¿ Como soluciono esto ?