Estou com o seguinte problema.......a página q estou desenvolvendo esta da seguinte forma.....no firefox ela abre normal....agora qnd vou abrir no IE7 os divs do conteúdo e menu lateral sobrepõe o div do topo.....veja a imagem abaixo:
Segue tb o código e o css:
HTML:
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title></title> <link href="css/estilo.css" rel="stylesheet" type="text/css" /> <link href="css/estilo_texto_paginas.css" rel="stylesheet" type="text/css" /> <link href="css/menu_lateral.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="geral"> <div id="topo"> <?php include "include/topo.php"; ?> </div> <div id="menu"> <?php include "include/menu_lateral.php"; ?> </div> <div id="conteudo"> <div class="titulo_page"> DIVISÕES </div> <div style="width:570px; padding-bottom:10px; padding-left:10px;"> texto texto texto texto texto texto </div> <div style="width:590px; height:450px;"> <div style="padding-top:15px; text-align:left; width:290px; float:right"> texto texto texto texto texto texto </div> <div style="padding-top:15px; text-align:left; width:300px;"> texto texto texto texto texto texto </div> <div style="padding-top:15px; text-align:left; width:300px;"> texto texto texto texto texto texto </div> <DIV style="padding-top:15px;"> <div class="titulo_page"> Setores </div> <div style="padding-top:15px; text-align:left; width:370px;"> texto texto texto texto texto texto </div> <div style="padding-top:15px; text-align:left; width:350px; float:left;"> texto texto texto texto texto texto </div> </DIV> </div> </div> <div id="barra_end"> </div> <div id="rodape">Todos os direitos reservados.</div> </div>
CSS:
/* Zerando as margens e preenchimentos de todas as tags */ * { margin: 0; padding: 0; } /* Definindo a fonte Verdana com tamanho 11px para as divs #lateral, #conteudo, #menu, #rodape, #topo */ #lateral, #conteudo, #menu, #rodape, #topo { font-family:Verdana, Geneva, sans-serif; font-size:11px; text-align:justify; } /* Definindo o mesmo verde que o das divs #menu e #lateral para a cor de fundo do geral */ /* definindo 775px de largura , tornando o layout fixo */ #geral { width: 775px; margin-top:5px; margin-left:5px; height:auto; background: url(../imagens/faux-columns.gif) repeat-y 0 0; } /* definido cor de background para o topo */ /* definindo altura de 200px */ #topo { background-color: #f9f9f9; height: 200px; } /* definindo 173px de largura para as divs #menu e #lateral */ /* definindo cor de background para as divs #menu e #lateral */ /* definindo 10px de padding para as divs #menu e #lateral */ #menu, #lateral { width: 173px; background-color: #f9f9f9; /*padding: 10px; */ } /* hack para q o FF, Opera, etc, deixem o tamanho correto do layout, pois não colocando ele adicionaria + 20px aos 150px das divs, totalizando 173px, que iria bagunçar o layout */ html>body #menu, html>body #lateral { width: 173px; } /* definindo float: left para o menu, para que fique grudado à esquerda do conteúdo */ #menu { float: left; width:173px; } /* definindo float: right para a lateral, para que fique grudado à direita do conteúdo */ #lateral { float: right; } /* como o geral está com o fundo verde, defino aqui um branco para o fundo do conteúdo. */ /* definindo margem 0 para a base e o topo e 150px para esquerda e direita */ /* definindo 10px de padding */ #conteudo { background-color: #f9f9f9; /*margin: 0 150px; padding: 10px;*/ float:left; PADDING-RIGHT: 8px; BACKGROUND-POSITION: 50% bottom; PADDING-LEFT: 10px; FONT-SIZE: 11px; PADDING-BOTTOM: 5px; /*MARGIN: 3px; */ LINE-HEIGHT: 18px; PADDING-TOP: 5px; TEXT-ALIGN: justify; font-family:Verdana, Arial, Helvetica, sans-serif; width:580px; margin-top:25px; display:inline; } /* definindo cor de background */ /* definindo altura de 20px */ /* não permitindo que objetos "flutuantes" obstruam o rodapé. */ #rodape { background-color: #000000; height: 20px; clear: both; color:#FFF; TEXT-ALIGN: center; font-size:11px; margin-bottom:5px; clear:both; } #barra_end { background-color: #dfe5ef; height: 40px; clear: both; color:#07519a; TEXT-ALIGN: center; font-size:11px; font-family:Verdana, Geneva, sans-serif; margin-bottom:2px; margin-top:10px; clear:both; } /***************************** -- CSS TOPO -- ******************************/ #tudo { background-color: #f9f9f9; width: 770px; height:auto; } .padrao { DISPLAY: block; FLOAT: left; MARGIN-BOTTOM: 2px; WIDTH: 775px; background-color:#FFCC00; height:21px; } .logom { DISPLAY: block; FLOAT: left; MARGIN-BOTTOM: 2px; WIDTH: 435px; background-color:#FFCC00; height:21px; } .logob { DISPLAY: block; FLOAT: right; MARGIN-BOTTOM: 2px; WIDTH: 100px; MARGIN-RIGHT: 10px; TEXT-ALIGN: right; height:21px; } .banner { MARGIN-TOP: 5px; margin-right:5px; FLOAT: left; BORDER-LEFT: #fff 1px solid; WIDTH: 775px; background-image:url(../imagens/banner.jpg); height:120px; } .banner .img { BORDER-RIGHT: #ffffff 2px solid; FLOAT: left; BORDER-LEFT: #99bcdc 1px dashed; WIDTH: 590px; TEXT-ALIGN: right; } .banner .titulo { PADDING-LEFT: 2px; margin-left:25px; FLOAT: left; WIDTH: 200px; PADDING-TOP: 0px; TEXT-ALIGN: center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; } .titulo { FONT-WEIGHT: bold; FONT-SIZE: 16px; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif; } .subtitulo { FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif; } .fita { FLOAT: left; WIDTH: 775px; HEIGHT: 60px; } .logos { BORDER-TOP: #999999 0px solid; DISPLAY: block; PADDING-LEFT: 5px; FLOAT: left; BORDER-LEFT: #cccccc 0px solid; WIDTH: 775px; PADDING-TOP: 0px; HEIGHT: 48px; TEXT-ALIGN: left; } .menus { MARGIN-TOP: 2px; FLOAT: left; MARGIN-LEFT: 25px; margin-bottom:0px; } .logoi { DISPLAY: block; FLOAT: left; MARGIN-BOTTOM: 2px; WIDTH: 350px; margin-top:2px; }
