Tabla en el lateral de la web no llega hasta abajo

AjoyAgua · #1 (**permalink**) 14/01/2012, 22:01

Hola amigos necesito que me echéis una mano. Tengo una web hecha con una columna lateral con una tabla con el 100% de alto. La web tiene en el centro un blog y llega hasta abajo del todo, pero la columna lateral se queda hasta la mitad (hasta donde acaba el contenido) y desde ahí hasta abajo todo queda negro y horrible. Lo gracioso es que sólo sucede en Internet Explorer. En Mozilla y Chrome sale hasta abajo de manera correcta.

No se que hacer. Ando desesperada.

gilberto_pineda · #2 (**permalink**) 14/01/2012, 22:15

Hola AjoyAgua , con lo que dices trato de imaginarme tu Web y poder ayudarte xD . El dar 100% de alto será tu dolor de cabeza toda la vida. El "contenedor" de tu info, ya sea un DIV, TABLE o lo que uses, siempre adaptará el alto al contenido, a menos que des un alto fijo y no en porcentaje.

Yo pensaría en usar como contenedor principal una tabla de dos columnas (no es para lo que se deben usar las tablas pero digamos que es una opción), y cada columna le das el background que necesites. Ahora en una columna montas tu barra lateral y en la otra el blog, de esta manera si el blog crece más que la barra lateral pues el background también lo hace y no te quedarán horribles vacios xD

Si puedes colocar el enlace a alguna imagen o el enlace a tu sitio para poder ver el problema seguro te podremos dar una mejor solución que ésta.

AjoyAgua · #3 (**permalink**) 14/01/2012, 22:35

Aquí el código:

<html>
<head>
<title>AYUDA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
<script type="text/javascript">

</script>
<link href="estilo_principal_2012.css" rel="stylesheet" type="text/css">
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">

</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="capacabecera">cabecera</div>
<div id="capabotonera"><?php include("botonera-superior-2012.php"); ?></div>
<div id="capa_del_video">AQUÍ VA UN VÍDEO YOUTUBE</div>
<div class="novedades_capa" id="capa1"></div>
<div class="titulovideo" id="capa_descripcion_video"></div>
<div id="capa_videos_izquierda"><?php include("plantilla-lateral-izquierda.php"); ?></div>
<div id="capa_videos_derecha"><?php include("plantilla-lateral-derecha.php"); ?></div>
<div id="capa-sombra"></div>
<table id="Tabla_01" width="851" height="1063" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="nuevaestructura2012/1.jpg" width="204" height="144" alt=""></td>
<td rowspan="3">
<img src="nuevaestructura2012/2.jpg" width="646" height="589" alt=""></td>
<td>
<img src="nuevaestructura2012/espacio.gif" width="1" height="144" alt=""></td>
</tr>
<tr>
<td>
<img src="nuevaestructura2012/3.jpg" width="204" height="27" alt=""></td>
<td>
<img src="nuevaestructura2012/espacio.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td rowspan="2"><table align="top" width="204" height="100%" border="0" cellpadding="0" cellspacing="0" class="tabla_izquierda" id="Tabla_04">
<tr>
<td valign="top" height="100%"><?php include("lateral2012.php"); ?>
 LATERAL CONFLICTIVO</td>
</tr>
</table></td>
<td>
<img src="nuevaestructura2012/espacio.gif" width="1" height="418" alt=""></td>
</tr>
<tr>
<td>
<table width="646" height="100%" border="0" cellpadding="0" cellspacing="0" background="nuevaestructura2012/5.jpg" id="Tabla_03">
<tr>
<td height="100%"><?PHP
$number=15;
include("/show_news.php");
?></td>
</tr>
</table></td>
<td>
<img src="nuevaestructura2012/espacio.gif" width="1" height="434" alt=""></td>
</tr>
<tr>
<td colspan="2">
<table width="850" height="100%" border="0" cellpadding="0" cellspacing="0" background="nuevaestructura2012/6.jpg" id="Tabla_02">
<tr>
<td width="36" height="100%"> </td>
<td width="237" class="texto_pequeño"> </td>
<td width="577"> </td>
</tr>
</table></td>
<td>
<img src="nuevaestructura2012/espacio.gif" width="1" height="40" alt=""></td>
</tr>
</table>
</body>
</html>

El CSS:

@charset "utf-8";
/* CSS Document */

#capacabecera {
position:absolute;
left:0px;
top:0px;
width:850px;
height:139px;
z-index:1;
}
#capabotonera {
position:absolute;
left:0px;
top:144px;
width:850px;
height:20px;
z-index:2;
}
#capa_del_video {
position:absolute;
left:294px;
top:221px;
width:464px;
height:282px;
z-index:3;
}
#capa1 {
position:absolute;
left:283px;
top:189px;
width:483px;
height:27px;
z-index:4;
}
.texto_pequeño {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

.titulovideo {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
font-style: italic;
font-weight: bold;
color: #CC3300;
text-align: center;
}
.tabla_izquierda {
background-color: #FFFFFF;
top: auto;
}

#capa_descripcion_video {
position:absolute;
left:300px;
top:526px;
width:450px;
height:35px;
z-index:5;
}
#capa-sombra {
position:absolute;
left:0px;
top:170px;
width:850px;
height:17px;
z-index:9;
background-image: url(nuevaestructura2012/sombra.png);
}
.novedades_capa {
font-family: "Times New Roman", Times, serif;
font-size: 18px;
font-style: normal;
color: #990000;
text-decoration: underline;
text-align: center;
}
#capa_lateral {
position:absolute;
left:0px;
top:172px;
width:204px;
height:307px;
z-index:8;
}

#capa_videos_izquierda {
position:absolute;
left:217px;
top:219px;
width:67px;
height:166px;
z-index:6;
}
#capa_videos_derecha {
position:absolute;
left:767px;
top:220px;
width:70px;
height:345px;
z-index:7;
}

AjoyAgua · #4 (**permalink**) 14/01/2012, 23:31

He conseguido engañar "a la vista" le he puesto un fondo a la capa madre que lo engloba todo y ahora llega hasta abajo en cualquier navegador, lo malo es eso, que es una chapucilla. En fin, mientras sea yo sola quien sepa que existe el error me doy por satisfecha.

PD: Si alguien consigue otra solución por favor que me eche una mano.