Layout quebrando para baixo do rodape no IE

[Gilmar Menezes 1]

Já é a segunda vez que tento colocar imagens na página e depois ela quebra e o conteúdo vai para baixo do rodapé

 

no firefox e no chrome estão funcionando normalmente:

 

Já no IE ...

 

 

EU percebi essa borda ao clicar na imagem invandindo a outra coluna como retirar essa borda?

 

HTML de onde está com problemas:

 

		<ul>
		<br />
		<li><img id="destaque-programas" src="img-destaques/menu.png" alt="Programas" /></li>
		<a title="Programas" href="programas.html">
		<li><img id="destaque-programas" src="img-destaques/chrome.jpg" alt="Chrome" border="1" /></li>
		</a>
	<ul>	
		<li class="lista">
			<br />
			<a href="#"><p>Adobe Flash Player</p></a><hr/>
			<a href="#"><p>Ares Galaxy</p></a><hr/>
			<a href="#"><p>Google Chrome</p><hr/>
			<a href="#"><p>Internet Explorer</p><hr/>
			<a href="#"><p>Mozilla Firefox</p><hr/>
			<a href="#"><p>Messenger Plus! Live</p><hr/>
			<a href="#"><p>MSN Messenger</p><hr/>
			<a href="#"><p>Skype</p><hr/>
			<a href="#"><p>Winrar</p><hr/>
		</li>
	</ul>

		</ul>
		coluna esquerda
		</div>
			<div id="col-right">
			<ul>
		<br />
		<li><img id="destaque-programas" src="img-destaques/menu.png" alt="Programas" /></li>
		<a title="Programas" href="programas.html">
		<li><img id="destaque-programas" src="img-destaques/pes12.jpg" alt="Chrome" border="1" /></li>
		</a>
	<ul>	
		<li class="lista">
			<br />
			<a href="#"><p>Assassins Creed</p></a><hr/>
			<a href="#"><p>Age of empires 3</p></a><hr/>
			<a href="#"><p>Batlefield Bad Company 2</p><hr/>
			<a href="#"><p>Call of duty: Black ops!</p><hr/>
			<a href="#"><p>Counter Strike 1.6</p><hr/>
			<a href="#"><p>Counter Strike: Source</p><hr/>
			<a href="#"><p>Fifa 12</p><hr/>
			<a href="#"><p>GTA San Andreas</p><hr/>
			<a href="#"><p>F.E.A.R 2</p><hr/>
		</li>
	</ul>

		</ul>
			coluna direita
			</div>
	</div>
</div>
<div id="big-col-right">
	<div id="little-col-right">
		<div id="col-left2">
		Coluna esquerda sup
		</div>
			<div id="col-right2">
			<ul>
			<li></li>
			</ul>
			</div>
		<div id="col-middle">
		<ul>
		<br />
		<li><img id="destaque-programas" src="img-destaques/menu.png" alt="Programas" /></li>
		<a title="Programas" href="programas.html">
		<li><img id="destaque-programas" src="img-destaques/bleach.jpg" alt="Chrome" border="1" /></li>
		</a>
	<ul>	
		<li class="lista">
			<br />
			<a href="#"><p>Bleach</p></a><hr/>
			<a href="#"><p>Cavaleiro do Zodíaco</p></a><hr/>
			<a href="#"><p>Death Note</p><hr/>
			<a href="#"><p>Dragon Ball Z</p><hr/>
			<a href="#"><p>Dragon Ball GT</p><hr/>
			<a href="#"><p>Dragon Ball Kai</p><hr/>
			<a href="#"><p>Naruto</p><hr/>
			<a href="#"><p>Naruto Shippuden</p><hr/>
			<a href="#"><p>Yuyu hakusho</p><hr/>
		</li>
	</ul>

		</ul>
		Coluna meio
		</div>
		<div id="sidebar">
		<ul>
		<br />
		<li><img id="destaque-programas" src="img-destaques/menu.png" alt="Programas" /></li>
		<a title="Programas" href="programas.html">
		<li><img id="destaque-programas" src="img-destaques/capitaoamerica.jpg" alt="Chrome" border="1" /></li>
		</a>
	<ul>	
		<li class="lista">
			<br />
			<a href="#"><p>American Pie 7</p></a><hr/>
			<a href="#"><p>Battle Los Angeles</p></a><hr/>
			<a href="#"><p>Capitão America</p><hr/>
			<a href="#"><p>Doce Vingaça</p><hr/>
			<a href="#"><p>Lanterna Verde</p><hr/>
			<a href="#"><p>Piratas do Caribe 4</p><hr/>
			<a href="#"><p>Thor</p><hr/>
			<a href="#"><p>Velozes & Furiosos 5</p><hr/>
			<a href="#"><p>X-MEN: Primeira Classe</p><hr/>
		</li>
	</ul>

		</ul>
			sidebar
			</div>

 

CSS:

#col-left, #col-right {
background:#FFF;
width:242px;
height:925px;
float:left;
}
#col-left a {
text-decoration:none;
}
#col-left p {
font-family:14px "Verdana" arial, tahoma;
color:#0065A8;
padding-top:2px;
padding-left:10px;
}
#col-left hr {
height:1px;
border:none;
border-top:1px solid #CCC;
margin:3px;
}
#col-left ul li.lista{
width:220px;
height:270px;
background:#FFF;
border:1px solid #CCC;
margin-left:6px;
}
#destaque-programas {
margin-left:6px;
text-decoration:none;
border-color:#CCC;
}
#col-right {
background:white;
float:right;
}
#col-right a {
text-decoration:none;
}
#col-right p {
font-family:14px "Verdana" arial, tahoma;
color:#0065A8;
padding-top:2px;
padding-left:10px;
}
#col-right hr {
height:1px;
border:none;
border-top:1px solid #CCC;
margin:3px;
}
#col-right ul li.lista{
width:220px;
height:270px;
background:#FFF;
border:1px solid #CCC;
margin-left:6px;
}
#destaque-programas {
margin-left:6px;
text-decoration:none;
border-color:#CCC;
}

#col-middle {
height:925px;
background:#FFF;
width:232px;
float:left;
}
#col-middle a {
text-decoration:none;
}
#col-middle p {
font-family:14px "Verdana" arial, tahoma;
color:#0065A8;
padding-top:2px;
padding-left:10px;
}
#col-middle hr {
height:1px;
border:none;
border-top:1px solid #CCC;
margin:3px;
}
#col-middle ul li.lista{
width:220px;
height:270px;
background:#FFF;
border:1px solid #CCC;
margin-left:6px;
}
#destaque-programas {
margin-left:6px;
text-decoration:none;
border-color:#CCC;
}
#sidebar {
height:925px;
background:#FFF;
width:232px;
float:right;
display:inline;
}
#sidebar a {
text-decoration:none;
}
#sidebar p {
font-family:14px "Verdana" arial, tahoma;
color:#0065A8;
padding-top:2px;
padding-left:10px;
}
#sidebar hr {
height:1px;
border:none;
border-top:1px solid #CCC;
margin:3px;
}
#sidebar ul li.lista{
width:220px;
height:270px;
background:#FFF;
border:1px solid #CCC;
margin-left:6px;
}
#destaque-programas {
margin-left:6px;
text-decoration:none;
border-color:#CCC;
}

[Gilmar Menezes 1]

Ajuda ai galera desde ontem que tento e não consigo ajustar o layout

[Diéssica 140]

Jesus, que bagunça :|

 

Adiciona na div que tá quebrando:

 overflow:hidden

[Gilmar Menezes 1]

HTML:

<div id="col-left">
<ul>
<br />
<li><img id="destaque-programas" src="img-destaques/menu.png" alt="Programas" /></li>
<a title="Programas" href="programas.html">
<li><img id="destaque-programas" src="img-destaques/chrome.jpg" alt="Chrome" border="1" /></li>
</a>

<ul>	
<li class="lista">
	<br />
	<a href="#"><p>Adobe Flash Player</p></a><hr/>
	<a href="#"><p>Ares Galaxy</p></a><hr/>
	<a href="#"><p>Google Chrome</p><hr/>
	<a href="#"><p>Internet Explorer</p><hr/>
	<a href="#"><p>Mozilla Firefox</p><hr/>
	<a href="#"><p>Messenger Plus! Live</p><hr/>
	<a href="#"><p>MSN Messenger</p><hr/>
	<a href="#"><p>Skype</p><hr/>
	<a href="#"><p>Winrar</p><hr/>
</li>
</ul>
</ul>
</div>

<div id="col-right">
<ul>
<br />
<li><img id="destaque-jogos" src="img-destaques/menu.png" alt="Programas" /></li>
<a title="Programas" href="programas.html">
<li><img id="destaque-jogos" src="img-destaques/pes12.jpg" alt="Chrome" border="1" /></li>
</a>
<ul>
<li class="lista">
	<br />
	<a href="#"><p>Assassins Creed</p></a><hr/>
	<a href="#"><p>Age of empires 3</p></a><hr/>
	<a href="#"><p>Batlefield Bad Company 2</p><hr/>
	<a href="#"><p>Call of duty: Black ops!</p><hr/>
	<a href="#"><p>Counter Strike 1.6</p><hr/>
	<a href="#"><p>Counter Strike: Source</p><hr/>
	<a href="#"><p>Fifa 12</p><hr/>
	<a href="#"><p>GTA San Andreas</p><hr/>
	<a href="#"><p>F.E.A.R 2</p><hr/>
</li>
</ul>

</ul>
</div>

<div id="col-middle">
<ul>
<br />
<li><img id="destaque-animes" src="img-destaques/menu.png" alt="Programas" /></li>
<a title="Programas" href="programas.html">
<li><img id="destaque-animes" src="img-destaques/bleach.jpg" alt="Chrome" border="1" /></li>
</a>
<ul>	
<li class="lista">
	<br />
	<a href="#"><p>Bleach</p></a><hr/>
	<a href="#"><p>Cavaleiro do Zodíaco</p></a><hr/>
	<a href="#"><p>Death Note</p><hr/>
	<a href="#"><p>Dragon Ball Z</p><hr/>
	<a href="#"><p>Dragon Ball GT</p><hr/>
	<a href="#"><p>Dragon Ball Kai</p><hr/>
	<a href="#"><p>Naruto</p><hr/>
	<a href="#"><p>Naruto Shippuden</p><hr/>
	<a href="#"><p>Yuyu hakusho</p><hr/>
</li>
</ul>
</ul>
</div>
[b]<div id="sidebar">[/b]
<ul>
<br />
<li><img id="destaque-filmes" src="img-destaques/menu.png" alt="Programas" /></li>
<a title="Programas" href="programas.html">
<li><img id="destaque-filmes" src="img-destaques/capitaoamerica.jpg" alt="Chrome" border="1" /></li>
</a>
<ul>	
<li class="lista">
	<br />
	<a href="#"><p>American Pie 7</p></a><hr/>
	<a href="#"><p>Battle Los Angeles</p></a><hr/>
	<a href="#"><p>Capitão America</p><hr/>
	<a href="#"><p>Doce Vingaça</p><hr/>
	<a href="#"><p>Lanterna Verde</p><hr/>
	<a href="#"><p>Piratas do Caribe 4</p><hr/>
	<a href="#"><p>Thor</p><hr/>
	<a href="#"><p>Velozes &amp Furiosos 5</p><hr/>
	<a href="#"><p>X-MEN: Primeira Classe</p><hr/>
</li>
</ul>

</ul>
	sidebar
	</div>

 

CSS:

			/* INICIO COL-LEFT, COL-RIGHT */
#col-left, #col-right {
background:#FFF;
width:242px;
height:925px;
float:left;
overflow:hidden;
}
#col-left a {
text-decoration:none;
}
#col-left p {
font-family:14px "Verdana" arial, tahoma;
color:#0065A8;
padding-top:2px;
padding-left:10px;
}
#col-left hr {
height:1px;
border:none;
border-top:1px solid #CCC;
margin:3px;
}
#col-left ul li.lista{
width:220px;
height:270px;
background:#FFF;
border:1px solid #CCC;
margin-left:6px;
}
#destaque-programas,#destaque-jogos, #destaque-animes, #destaque-filmes {
margin-left:6px;
text-decoration:none;
border-color:#CCC;
}
#col-right {
float:right;
}
#col-right a {
text-decoration:none;
}
#col-right p {
font-family:14px "Verdana" arial, tahoma;
color:#0065A8;
padding-top:2px;
padding-left:10px;
}
#col-right hr {
height:1px;
border:none;
border-top:1px solid #CCC;
margin:3px;
}
#col-right ul li.lista{
width:220px;
height:270px;
background:#FFF;
border:1px solid #CCC;
margin-left:6px;
}
			/* FINAL COL-LEFT, COL-RIGHT */
			/* INICIO MIDDLE */
#col-middle {
height:925px;
background:#FFF;
width:232px;
float:left;
overflow:hidden;
}
#col-middle a {
text-decoration:none;
}
#col-middle p {
font-family:14px "Verdana" arial, tahoma;
color:#0065A8;
padding-top:2px;
padding-left:10px;
}
#col-middle hr {
height:1px;
border:none;
border-top:1px solid #CCC;
margin:3px;
}
#col-middle ul li.lista{
width:220px;
height:270px;
background:#FFF;
border:1px solid #CCC;
margin-left:6px;
}
			/* FINAL MIDDLE */

			/* INICIO SIDEBAR */
#sidebar {
height:925px;
background:#FFF;
width:232px;
float:right;
overflow:hidden;
}
#sidebar a {
text-decoration:none;
}
#sidebar p {
font-family:14px "Verdana" arial, tahoma;
color:#0065A8;
padding-top:2px;
padding-left:10px;
}
#sidebar hr {
height:1px;
border:none;
border-top:1px solid #CCC;
margin:3px;
}
#sidebar ul li.lista{
width:220px;
height:270px;
background:#FFF;
border:1px solid #CCC;
margin-left:6px;
}
			/* FINAL SIDEBAR */

Eu adicionei o overflow:hidden; , mas o layout continua quebrando.

 

Olha como ficou:

 

IE:

FF:

[Diéssica 140]

Não era pra adicionar o overflow em todos os elementos e sim no principal, o responsável por essas 3 colunas que quebram o layout. :)