Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá,
Estou um problema no IE.
Tenho um layout com duas colunas: menu e conteúdo.
Porém quando o tamanho do conteúdo passa do limite da tela o conteúdo é jogado para baixo.
Tem um exemplo online no endereço: www.isacvelozo.com/ex/exemplo.html
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.isacvelozo.com/ex/tela.jpg&key=41b5f67870353580623a20796863d8b8269ac28db7205d223f38bc5cf8671aef" alt="Imagem Postada" />
Abaixo segue o código
/ CSS Document /body{ margin:0; background:#FFF; min-width:400px; font:12px Verdana, Arial, Helvetica, sans-serif;}/ TOPO /#topo { background:#e1e1e1 repeat-x left top; height:100px; padding:0; margin:0; }/ CORPO /#corpo { margin:5px 0;}#esquerda { float:left; width:190px; background:#009900; margin:0 0 5px 0; padding:0}#centro { margin:0 10px 0 200px; min-height:300px; padding:5px; background:#f0f0f0; width:auto; }#centro { /padding: 0 20px;/ width:10;}/ ESQUERDA /#esquerda h1 { font:bold 12px/25px Verdana, Arial, Helvetica, sans-serif; text-align:center; background: url(../imagens/bg/topo_menu.jpg) #CCCCCC; border-bottom:1px solid #e1e1e1; margin:0;}#esquerda a { font:12px Verdana, Arial, Helvetica, sans-serif; background:#009900; border-bottom:1px solid #0066CC; display:block; color:#FFFFFF; font-weight:bold; display:inline; padding:5px 0 5px 10px; clear:both; float:left; width:180px; margin:0; cursor:"hand"; text-decoration:none;}#esquerda a:hover, #esquerda hover { background:#566891; cursor:pointer; color:#FFFFFF; cursor:"hand";}/#esquerda a.pai, #esquerda .pai{ background:#566891; border-bottom:1px solid #0066CC; display:block; color:#FFFFFF; font-weight:bold;}// SUB-MENU /.sub_menu{ position:absolute; left:190px; z-index:1; }#inclusao { top:257px; }#consulta { top:282px;}#download { top:307px;}.sub_menu { width:190px;}.sub_menu a { font:12px Verdana, Arial, Helvetica, sans-serif; text-align:left; background:#0099CC; border-bottom:1px solid #0066CC; display:block; text-indent:10px; text-decoration:none; color:#FFFFFF; padding:5px 0; width:180px;}/.sub_menu a { font:12px Verdana, Arial, Helvetica, sans-serif; text-align:left; background:#33CCCC; border-bottom:1px solid #0066CC; display:block; text-indent:10px; text-decoration:none; color:#FFFFFF; padding:5px 0;}/.sub_menu a:hover { background:#66CCFF; color:#009900;}/ TEXTOS /#titulo_pagina { font:bold 15px/30px Verdana, Arial, Helvetica, sans-serif; border-bottom:1px solid #009900;text-indent:15px; color:#009900;}p { margin:10px 5px; text-align:justify; text-indent:20px; }/ TABELAS /table.listagem { border-collapse:collapse; /width:95%;/ border:1px solid #0066CC;}table.listagem tr td { border:1px solid #0066CC;}table.listagem tr th { padding:3px; font:12px Verdana, Arial, Helvetica, sans-serif; background:#009900; color:#FFFFFF; font-weight:bold; border:1px solid #0066CC;}table.listagem tr th img { vertical-align:bottom;}table.listagem tr td { padding:3px; font:12px Verdana, Arial, Helvetica, sans-serif; background:#e1e1e1;}/ RODAPÉ /#rodape { background:#e1e1e1; height:28px; text-align:center; font:11px/28px Arial, Helvetica, sans-serif;}/ CSS Document */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="css/exemplo.css"></head><body><!--Menu --><iframe name="isub_menu" id="isub_menu" frameBorder=0 scrolling="no" style="position:absolute; display:none; background:#666666"></iframe><div class="sub_menu" id="inclusao" style="display:none;" onmouseover="java script:verSubMenu(this,'inclusao')" onmouseout="java script:ocultarSubMenu(this,'inclusao')"><!--a href="#" onmouseover="java script:verSubMenu(this,'inclusao')">Acervo Paleontológico</a--><a href="paginas/aflora.html" target="iframe">Afloramentos</a><a href="[http://geobank-dese/pls/cprm/Geocron.Cons_geocronologia" target="iframe">Datações Geocronológicas</a><a href="http://geobank-dese/pls/cprm/geobank.Estrutural.Cons_provincia" target="iframe">Estrutural</a><a href="http://geobank-dese/pls/cprm/geoambiental.Geoambiental.consultar" target="iframe">Geoambiental</a><a href="#">Geoquímica</a><a href="paginas/lito.html" target="iframe">Litoestratigrafia</a><a href="#">Recursos Minerais</a></div><div class="sub_menu" id="consulta" style="display:none;" onmouseover="java script:verSubMenu(this,'consulta')" onmouseout="java script:ocultarSubMenu(this,'consulta')"> <a href="#">Web Map</a> <a href="#">Mapas Indice</a> <a href="#">Projetos</a></div><div class="sub_menu" id="download" style="display:none;" onmouseover="java script:verSubMenu(this,'download')" onmouseout="java script:ocultarSubMenu(this,'download')"> <a href="#">Arquivos Vetoriais</a> <a href="#">Manuais</a> <a href="#">Programas</a></div><!-- Fim Menu --><!-- Topo --><div id="topo"> Topo</div><!-- Corpo --><div id="corpo"> <div id="esquerda"> <h1>Menu Principal</h1> <a href="paginas/boas_vindas.html" target="iframe" class="pai">Página Inicial</a> <a href="paginas/apresentacao.html" target="iframe" class="pai">Apresentação</a> <a class="pai" onmouseover="java script:verSubMenu(this,'inclusao')" onmouseout="java script:ocultarSubMenu(this,'inclusao')">Inclusão/Alteração</a> <a class="pai" onmouseover="java script:verSubMenu(this,'consulta')" onmouseout="java script:ocultarSubMenu(this,'inclusao')">Consultas</a> <a class="pai" onmouseover="java script:verSubMenu(this,'download')" onmouseout="java script:ocultarSubMenu(this,'download')">Downloads</a> </div> <div id="centro" style="border:1px solid"> <div id="titulo_pagina">Título</div> <br/> <div style=" background:#999999"> </div> <div > <table class="listagem" width="98%" align="center"> <tr> <th>Teste</th> </tr> <tr> <td>Teste</td> </tr> </table> <br> <table class="listagem" width="100%" align="center" > <tr> <th>Teste</th> </tr> <tr> <td>Testedhsjghjkfdghkj fdgf dgs dgfdyyyyyyuuuuuuuuuuuuuuuuuuuuuyyuuuuuuuucasa</td> </tr> </table> </div> </div></div> <!-- Rodapé --><div id="rodape"> Rodapé</div><script>var height;for ( var i=0; i < div.length; i++ ) { if ( div[i].id == "centro" ) { height = div[i].offsetHeight; }}for ( var i=0; i < div.length; i++ ) { if ( div[i].id == "esquerda" ) { div[i].style.height = height; }}</script></body></html>Agradeço antecipadamente
Carregando comentários...
