Hola tengo un problema con el siguiente codigo :
El HTML
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="style.css" rel="stylesheet" type="text/css" />
<center>
<p><img src="logo.png" width="507" height="100" /></p> <div class="categorias_body">
<p>Contenido de Noticia1
</p>
<p>Contenido de Noticia2
</p>
<p>Contenido de Noticia3
</p>
<p>Contenido de Noticia4
</p>
<p>Contenido de Noticia5
</p>
<div class="categorias_body"> <p><img src="logo.png" width="507" height="100" /></p> </center>
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 ?