Problema con Firefox3: centrado de Div Hoy he instalado el FF3 y al entrar en mi página resulta que no muestra centrado el Div del cuerpo central de la web, pero sí la cabecera o el footer y es la misma regla CSS para las tres capas. Sin embargo, se ve bien en IE6, IE7 y FF2.
Es la primera vez que hago una web con divs y css y lo más probable es que lo haya estructurado mal, el código esté mal escrito, etc. Se me ocurre que podría ser que se solapa alguna capa y por eso se alinea a la izquierda...
Una página de ejemplo para que veáis cómo queda:
http://callepaseodelacastellana.es/prueba.asp
Os copio el code.
Código:
body {
background: url(i_web/bg_top.gif) repeat-x #444;
font-family: verdana;
font-size: 12px;
color: #333;
}
a, a:link {
color: #000;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #47C6E9;
text-decoration: none;
font-weight: bold;
}
h1 {
color:#333;
font-size: 1.6em;
}
#header, #content, #footer {
background: #FFF;
width: 850px;
margin:0px auto 0px auto;
}
#header { height: 80px; }
#publicidadHeader{
float: right;
text-align: center;
padding: 10px;
margin-right: 14px;
}
#logo { float: left; }
#content {
background: url(i_web/bolas_izq.gif) #FFF no-repeat bottom left;
display: table-caption;
}
#footer {
background: url(i_web/fondo_footer.gif);
height: 20px;
vertical-align: bottom;
}
#nav-side-right {
float: right;
width: 180px;
height: 500px;
margin: 0 15px 0 0;
background: url(i_web/nav-side-right-mid.gif) no-repeat bottom;
text-align: center;
}
#nav-sup-left {
float: left;
padding: 5px;
background: #F5F4F1;
width: 630px;
height: 22px;
}
#text-content-home, #text-content {
float: left;
padding-left: 10px;
padding-top: 5px;
text-align: justify;
}
#comments {
color:#999999;
font-size: 0.9em;
text-align:right;
margin-right: 15px;
width: 250px;
float:right;
}
#text-content-home { width: 220px; }
#text-content { width: 495px; }
#AdIzq {
float: left;
width: 120px;
padding-left: 6px;
padding-top: 5px;
}
#black-footer, #black-footer-top,#black-footer-foot {
width: 850px;
text-align: center;
margin:0 auto 0 auto;
}
#black-footer {
background: #000;
color: #CCC;
font-size: 0.8em;
}
#black-footer-top, #black-footer-foot { height: 11px; }
#black-footer-top { background: url(i_web/black-footer-top.gif) #000 no-repeat; }
#black-footer-foot { background: url(i_web/black-footer-foot.gif) #000 no-repeat; }
#black-footer a,#black-footer a:link{
color: #FFF;
text-decoration: none;
}
#black-footer a:hover{
color: #CCC;
text-decoration: underline;
}
#nav-sup-left a, #nav-sup-left a:link{
color: #000;
text-decoration: none;
}
#nav-sup-left a:hover {
color: #47C6E9;
border-bottom: 5px solid #47C6E9;
}
Código:
<link href="css_castellana.css" rel="stylesheet" type="text/css" media="screen">
<body>
<div id="header">
<div id="logo">
</div>
<div id="publicidadHeader">
</div>
</div>
<div id="content">
<div id="nav-sup-left">
<!--#include file="menu_nav_sup.asp"-->
</div>
<div id="nav-side-right">
<!--#include file="videos_youtube.asp"-->
</div>
<div id="AdIzq">
<!--#include file="publicidad_izq.asp"-->
</div>
<div id="text-content">
<h1>El paseo de la castellana</h1>
<p>texto </p>
</div>
<div id="comments">
<p>texto</p>
</div>
</div>
<!-- Pie de página -->
<div id="footer"></div>
<div id="black-footer-top"></div>
<div id="black-footer">
<!--#include file="footer.asp"-->
</div>
<div id="black-footer-foot"></div>
<!--#include file="info-castellana.asp"-->
</div>
</body>
