Layout cria espaço lateral sem necessidade no IE
Boas Galera,
Seguinte, estou com um pequeno problema no IEca...¬¬ (pra variar)...
é o seguinte, estou trabalhando em um layout, eu consegui fazer encaixar perfeitamente, esout usando CSS e javascript para que o layout encaixe bem em qualquer resolução e qualquer navegador, porém quando rodo ele no IE o encaixe fica perfeito, mas no lado direito o IE encerra a DIV antes do que deveria, iou seja, antes do final do navegador, não que isso seja um problema muito grande, porém quem for abrir o site em 800x600 vai perder muita área de trabalho por questão disto, sem contar também que fica estéticamente feio, se possível alguém poderia me dar uma luz???
Já tentei fazer as alterações por hack CSS, por javascript e não tem cristão que resolva o problema.
no momento o site ainda não está no ar, então postarei o código, isto ajuda?
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml%22)
<head>
<title>.::Neo Mídia Idiomas e Informática::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="FW MX CSS Layer" />
<meta name="Keywords" content="cursos, cursos de informática, cursos de idiomas, cursos de inglês, cursos de espanhol, cursos de español, espanhol, español, inglês, informática, english, computação, curso de computação, escola de computação" />
<link href="styles/principal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--
function aumenta(){
navegador = navigator.appName;
if(navegador == "Microsoft Internet Explorer"){
largura = document.body.clientWidth;
tamanho= document.body.clientHeight - 391;
document.getElementById('layout_r11_c2').height = tamanho;
document.getElementById('layoutr11c2').height = tamanho;
document.getElementById('layout_r11_c1').height = tamanho;
document.getElementById('layoutr11c1').height = tamanho;
}
else{
largura = document.documentElement.clientWidth;
tamanho= document.documentElement.clientHeight - 391;
document.getElementById('layout_r11_c2').height = tamanho;
document.getElementById('layoutr11c2').height = tamanho;
document.getElementById('layout_r11_c1').height = tamanho;
document.getElementById('layoutr11c1').height = tamanho;
}
posicao = (largura-185) / 2 + 185 - 225 +"px";
document.getElementById('banner').style.left = posicao;
}//-->
</script>
<style type="text/css">
#layoutr1c1 {
position:absolute;
left:0px;
top:0px;
width:185px;
height:391px;
z-index:1;
visibility:visible;
}
#layoutr1c2 {
position:absolute;
left:185px;
top:0px;
width:100%;
height:31px;
z-index:2;
visibility:visible;
}
#layoutr2c2 {
position:absolute;
left:185px;
top:31px;
width:100%;
height:34px;
z-index:3;
visibility:visible;
}
#layoutr3c2 {
position:absolute;
left:185px;
top:65px;
width:100%;
height:41px;
z-index:4;
visibility:visible;
}
#layoutr4c2 {
position:absolute;
left:185px;
top:106px;
width:100%;
height:42px;
z-index:5;
visibility:visible;
}
#layoutr5c2 {
position:absolute;
left:185px;
top:148px;
width:100%;
height:43px;
z-index:6;
visibility:visible;
}
#layoutr6c2 {
position:absolute;
left:185px;
top:191px;
width:100%;
height:39px;
z-index:7;
visibility:visible;
}
#layoutr7c2 {
position:absolute;
left:185px;
top:230px;
width:100%;
height:48px;
z-index:8;
visibility:visible;
}
#layoutr8c2 {
position:absolute;
left:185px;
top:278px;
width:100%;
height:33px;
z-index:9;
visibility:visible;
}
#layoutr9c2 {
position:absolute;
left:185px;
top:311px;
width:100%;
height:46px;
z-index:10;
visibility:visible;
}
#layoutr10c2 {
position:absolute;
left:185px;
top:357px;
width:100%;
height:34px;
z-index:11;
visibility:visible;
}
#layoutr11c1 {
position:absolute;
left:0px;
top:391px;
width:185px;
height:29px;
z-index:12;
visibility:visible;
}
#layoutr11c2 {
position:absolute;
left:185px;
top:391px;
width:100%;
height:29px;
z-index:13;
visibility:visible;
}body {
background-image: url(imagens/bg_reso.jpg);
}
</style>
</head>
<body bgcolor="#fdf8f2" onload="aumenta()">
<div id="esquerda" class="coluna">
<div id="layoutr1c1"><img src="imagens/layout_r1_c1.jpg" width="185" height="391" border="0" id="layout_r1_c1" alt="" /></div>
<div id="layoutr11c1"><img id="layout_r11_c1" src="imagens/layout_r11_c1.jpg" width="185" height="29" border="0" alt="" /></div>
<div id="menu" class="menu">
<table width="100%" border="0" id="table" cellspacing="2" cellpadding="3">
<tr>
<td><font color="#000000" face="Arial, Helvetica, sans-serif"><b>.:: </b><a href="#">Home</a></font></td>
</tr>
<tr>
<td><font color="#000000" face="Arial, Helvetica, sans-serif" size="2"><b>.:: </b><a href="#">Cursos</a></font></td>
</tr>
<tr>
<td><font color="#000000" face="Arial, Helvetica, sans-serif" size="2"><b>.:: </b></font><a href="#">Aluno</a></td>
</tr>
<tr>
<td><font color="#000000" face="Arial, Helvetica, sans-serif"><b>.:: </b><a href="#">¿In Company?</a></font></td>
</tr>
<tr>
<td><font color="#000000" face="Arial, Helvetica, sans-serif"><b>.:: </b><a href="#">SAC</a></font></td>
</tr>
<tr>
<td><font color="#000000" face="Arial, Helvetica, sans-serif"><b>.:: </b><a href="#">Trabalhe Conosco</a></font></td>
</tr>
</table>
</div>
</div>
<div id="meio" class="coluna">
<div id="layoutr1c2"><img src="imagens/layout_r1_c2.jpg" width="100%" height="31" border="0" id="layout_r1_c2" alt="" /></div>
<div id="layoutr2c2"><img src="imagens/layout_r2_c2.jpg" width="100%" height="34" border="0" id="layout_r2_c2" alt="" /></div>
<div id="layoutr3c2"><img src="imagens/layout_r3_c2.jpg" width="100%" height="41" border="0" id="layout_r3_c2" alt="" /></div>
<div id="layoutr4c2"><img src="imagens/layout_r4_c2.jpg" width="100%" height="42" border="0" id="layout_r4_c2" alt="" /></div>
<div id="layoutr5c2"><img src="imagens/layout_r5_c2.jpg" width="100%" height="43" border="0" id="layout_r5_c2" alt="" /></div>
<div id="layoutr6c2"><img src="imagens/layout_r6_c2.jpg" width="100%" height="39" border="0" id="layout_r6_c2" alt="" /></div>
<div id="layoutr7c2"><img src="imagens/layout_r7_c2.jpg" width="100%" height="48" border="0" id="layout_r7_c2" alt="" /></div>
<div id="layoutr8c2"><img src="imagens/layout_r8_c2.jpg" width="100%" height="33" border="0" id="layout_r8_c2" alt="" /></div>
<div id="layoutr9c2"><img src="imagens/layout_r9_c2.jpg" width="100%" height="46" border="0" id="layout_r9_c2" alt="" /></div>
<div id="layoutr10c2"><img src="imagens/layout_r10_c2.jpg" width="100%" height="34" border="0" id="layout_r10_c2" alt="" /></div>
<div id="layoutr11c2"><img id="layout_r11_c2" src="imagens/layout_r11_c2.jpg" width="100%" height="29" border="0" alt="" /></div>
<div id="banner">TESTE</div>
</div>
</body>
</html>CSS
>
body{
margin: 0;
padding-left: 185px;
padding-right: 45px;
min-width: 550px;
}
.menu {
overflow: hidden;
border:none;
position: absolute;
z-index: 27;
top: 110px;
left: 10px;
width:155px;
}.menu a {
font-family: Arial, Helvetica, sans-serif;
color:#000000;
font-size: 12px;
left: 0px;
text-decoration:none;
padding-left:27px;
position: absolute;
width:120px;
z-index: 2;
}* html .menu a{
display:inline-block;
width: 150px;
line-height:18px;
border: none;
}a:hover {
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 12px;
left: 0px;
padding-left:37px;
position:absolute;
}.menu table {
border: none;
}.menu td {
border:none;
font-size:10pt;
padding-left:10px;
background-image:url("../imagens/button.jpg");
background-repeat:no-repeat;
}
#meio {
padding: 0 20px;
width: 100%;
height:100%;
margin-left:-185px;
border: soleit thin;
}
#esquerda {
width: 185px;
padding: 0 10px;
left: 0px;
margin-left: -185px;
right: 0px;
}
.coluna {
position: relative;
float: left;
}
#banner {
background-color: #FFF4E6;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position:absolute;
overflow: hidden;
z-index: 15;
height: 75px;
width: 450px;
top: 10px;
left: 300px;
}O padding right no elemento "body" é necessário para o ajuste adequado no FF, porém mesmo tirando este Padding o IE continua gerando este espaço.
OS dois passaram na validação w3c então creio que não seja problema no web standards em si, creio que possa ser algo com o IE.
vou postar uma imagem para vocês verem como está ficando:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img122.imageshack.us/img122/3098/imagemas6.jpg&key=e9667938667145eda2403ecfda7121c41e758a668b960a4c737fac6192ceb55c" alt="Imagem Postada" />
Reparem ao lado direito como o Layout é encerrado antes do final da página, isto não deveria acontecer, pois está com porcentagem.
Agradeço por qualquer ajuda galera.
Discussão (10)
Carregando comentários...