Hola a todos.
Tengo un problemón con el CSS. No se si sean errores de principiante, o los navegadores, pero en serio, necesito ayuda.
Resulta que estoy empleando un contenedor general que se centra en la pantalla. Éste tiene una tabla interna que estoy usando como plantilla para las páginas web, formada por 3 filas: Encabezado, contenido y pie. El encabezado y contenido los guardo en archivos aparte, que se cargarán en los otros ficheros. Allí no hay problema.
El problema surge en la celda de contenido, pues le coloco un fondo diferente al fondo general (como una caja encima del fondo). Cuando el sitio no supera el alto de la pantalla, luce perfecto (tanto en IE como en FF). El problema está cuando hay overflow.
En IE no ocurre nada... bueno, especifico: IE 6.0
En FF se ve como si las celdas de contenido y pie fueran separadas por un espacio vacío. lo mismo ocurre con el IE 7 (como me comentó un amigo que lo vió allí) es más, el fondo no se carga completo y se nota una especie de overlow en la celda central (muy notorio en IE 7)
No sé si me capten bien, pero en medio de mi desesperación (pues es mi tesis de grado), no hayo cómo explicarles bien mi problema.
Aquí les proporciono el CSS:
Código HTML:
/******* Formato del fondo *******/
html, body {
background-color: #9CF;
padding: 0px;
height: 100%;
}
/* Formato de los links */
a {
color: #0000FF;
text-decoration: none;
}
/* Formato de los links cuando el puntero pasa sobre ellos */
a:hover {
text-decoration: underline;
}
/******* Contenedor de mensajes. Se centra en medio de la pantalla *******/
#messages {
position: relative;
width: 400px;
min-height: 100px;
background: #FFF;
border: 1px solid #003366;
font: normal 14px Arial, Helvetica, sans-serif;
margin-left: -250px;
z-index: 100;
left: 50%;
top: 50;
text-align: center;
padding: 50px;
}
#messages h3 {
font-weight: bold;
}
/* Tan Hack para IE
* html #messages h3 {
font-size: 12px;
}*/
#messages p {
letter-spacing: normal;
font-size: 12px;
}
/******* Contenedor principal. Se centra en medio de la pantalla *******/
#container {
position: absolute;
width: 817px;
height: 100%;
/*background: url(images/bg.png) repeat-y center 0%;*/
font: normal 11px/15px Arial, Helvetica, sans-serif;
margin-left: -410px;
z-index: 100;
left: 50%;
top: 0;
background: #CC99FF;
}
/* Display de los elementos tipo H3 (para efecto de documentación) */
#container h3 span {
display: none;
}
/******* Contenedor de la cabecera de la página *******/
#header {
position: relative;
height: 154px;
}
/* Banner con el logo de SAIDCOMS */
#Logo {
position: absolute;
width: 799px;
height: 117px;
left: 9px;
background: url(images/Banner.png) no-repeat right 0%;
}
/* Barra izquierda del botón HOME */
#Home {
position: absolute;
width: 190px;
height: 38px;
top: 117px;
left: 8px;
background: url(images/HomeBar.png) no-repeat;
z-index: 120;
text-align: center;
}
/* Colección de links a las opciones principales */
#Links {
position: absolute;
padding-top: 10px;
top: 117px;
right: 9px;
width: 610px;
height: 36px;
background: url(images/MainBar2.png) repeat-x;
text-align: right;
}
/* Formato de los links */
#Links a {
color: #0099FF;
text-decoration: none;
padding-left: 40px;
padding-right: 40px;
}
/* Formato de los links cuando el puntero pasa sobre ellos */
#Links a:hover {
color: #FFF;
}
/******* Contenedor de las opciones particulares *******/
#Options {
position: absolute;
float: left;
width: 140px;
margin: 15px 5px;
border-right: 1px solid #003366;
padding: 10px 10px 50px 20px;
z-index: 120;
font-size: 12px;
}
/* Tan Hack para IE5.x/win
* html #Options {
width: 155px;
w\idth: 140px;
}*/
/* Cabecera de las opciones */
#Options h3 {
width: 96px;
height: 20px;
background: url(images/Opciones.png);
}
/* Formato de los formularios */
#Options form {
margin: 25px 10px;
padding: 10px;
border: 1px solid;
background: #9CF;
}
/* Formato de las listas no ordenadas */
#Options ul {
list-style-image: url(images/Dot.png);
padding-left: 5px;
margin: 5px 0 20px 5px;
}
/* Margen para los elementos de la lista */
#Options ul li {
margin-bottom: 8px;
}
/* Formato de los links */
#Options a {
color: #000066;
}
/* Formato de los links cuando el puntero pasa sobre ellos */
#Options a:hover {
color: #0000FF;
}
/******* Contenedor principal *******/
#MainContainer {
position: relative;
width: 798px;
margin: 0 auto;
padding-bottom: 30px;
}
/* Formato del contenido principal */
#Main {
float: right;
margin-right: 25px;
width: 550px;
margin-top: 25px;
margin-bottom: 25px;
}
/* Formato de los párrafos */
#Main p {
letter-spacing: 0.03em;
text-align: justify;
margin-bottom: 15px;
}
/* Formato de los títulos */
#Main h3 {
font-size: 14px;
}
/******* Contenedor de las tablas *******/
#Tabla {
margin: 25px 15px;
text-align: center; /* Al parecer no funciona en Mozilla Firefox */
}
/* Tan Hack para las tablas en IE *
* html #Tabla {
margin: 25px -5px;
}*/
/* Formato de las cabeceras */
#Tabla th {
border: 2px solid #003366;
border-left: 0;
border-right: 0;
background-color: #99CCFF;
}
/* Formato de las celdas */
#Tabla td {
border-bottom: 1px solid #003366;
}
/******* Contenedor del pie de página *******/
#footercont {
position: relative;
width: 817px;
height: 50px;
/*background: url(images/bg.png) repeat-y center 0%;*/
/*margin-left: -410px;
/*margin-top: -50px;*/
z-index: 100;
/*left: 50%;*/
botton: 0px;
background: #FFCCFF;
}
/* Formato del pie de página */
#footer {
position: absolute;
width: 800px;
height: 18px;
padding-top: 4px;
background: url(images/FootBg.png) repeat-x;
bottom: 0px;
left: 8px;
text-align: right;
color: #3366CC;
font-size: 10px;
}
/* Formato del link */
#footer a {
padding-right: 5px;
text-align: right;
font-size: 10px;
color: #3366CC;
}
/* Formato de los links cuando el puntero pasa sobre ellos */
#footer a:hover {
color: #FFF;
}
p.last {
padding-bottom: 50px;
}
Aquí el formato dle header:
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="800" height="100%" border="0" cellspacing="0">
<tr>
<td height="154px">
<div id="header">
<div id="Logo">
<h3><span>Logotipo del sistema</span></h3>
</div>
<div id="Home">
<a href="Style-test.htm"><img src="../Images/HomeButton.png" border="0"></a> </div>
<div id="Links">
<a href="Style-test.htm">Link1</a>
<a href="Style-test.htm">Link2</a>
<a href="Style-test.htm">Link3</a>
<a href="Style-test.htm">Link4</a> </div>
</div>
</td>
</tr>
<tr>
<td height="100%" valign="top">
</body>
</html> Este es el footer:
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
</td>
</tr>
<tr>
<td height="50px">
<div id="footercont">
<div id="footer">
</div>
</div>
</td>
</tr>
</table>
</body>
</html> Como pudieron ver, el header termina con un <td> y el footer comienza con un </td>, lo que me generaría la celda central.
Cómo hago? Alguna ayuda? (y no, no lo tengo en la web aún)