Foros del Web » Creando para Internet » CSS »

Problema con Firefox3: centrado de Div

Estas en el tema de Problema con Firefox3: centrado de Div en el foro de CSS en Foros del Web. Buenos días, Hoy he instalado el FF3 y al entrar en mi página resulta que no muestra centrado el Div del cuerpo central de la ...
  #1 (permalink)  
Antiguo 18/06/2008, 05:57
Avatar de n4gash  
Fecha de Ingreso: octubre-2007
Mensajes: 15
Antigüedad: 10 años, 1 mes
Puntos: 0
Exclamación Problema con Firefox3: centrado de Div

Buenos días,

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>
  #2 (permalink)  
Antiguo 18/06/2008, 13:14
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: Problema con Firefox3: centrado de Div

He encontrado el problema. Es aquí:
Código:
#content {	  
	 background: url(i_web/bolas_izq.gif) #FFF no-repeat bottom left; 
	 display: table-caption; 
}
Esa línea la tienes que borrar. Pero ahora tienes otros problemas:
-Para solucionar que los divs no tienen alto, pon al principio de tu CSS esta línea:
Código:
html, body{ height: 100%; }
-Para solucionar que no tienen fondo, ve poniendo esta línea al final de los divs que no tengan fondo:
Código:
<div style="clear: both"></div>
Con eso creo que ya se soluciona.
  #3 (permalink)  
Antiguo 18/06/2008, 13:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con Firefox3: centrado de Div

Creo que podría bastar con cambiar display: table-caption; por display: table; , aunque no estoy del todo seguro de cómo afectaría a IE, pero creo que no pasaría nada.

Mikel.
  #4 (permalink)  
Antiguo 19/06/2008, 01:47
Avatar de n4gash  
Fecha de Ingreso: octubre-2007
Mensajes: 15
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Problema con Firefox3: centrado de Div

Buenos días,

Muchas gracias a los dos.

Finalmente lo que he hecho ha sido quitar el table-caption y sustituirlo por overflow: hidden;, solución que he encontrado a raiz de buscar información acerca de clear:both ;)

Gracias de nuevo.

Saludos.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:19.