Estou ficando louco.. Fiquei o dia todo mexendo nesse layout e acabei "empacando" no xxxxxx rodapé que fica fora do lugar no Firefox. Já validei meu CSS, mas ele só dá erros de background-color e etc.
Vou postar o código da minha página, e em seguida do meu CSS, para quem puder me ajudar...
A página:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="estilo.css" /> <title>LLALLALA</title> </head> <body> <div id="geral"> <div id="cabecalho"> <a href="#" alt="LLALLALA"><img src="img/logo.gif" alt="LLALLALA" width="150" height="52" class="esq" /></a> <a href="#" target="_blank" alt="LLALLALA"><img src="img/logo2.gif" alt="LLALLALA" width="42" height="50" class="dir" /></a> </div> <div id="mnu_geral"> LALALA | LALALA </div> <div id="corpo"> <div id="mnu_esq"> <ul id="menu"> <li><a href="#">LLALLALA</a></li> <li><a href="#">LLALLALA</a></li> <li><a href="#">LLALLALA</a></li> <li><a href="#">LLALLALA</a></li> <li><a href="#">LLALLALA</a></li> </ul> </div><div id="conteudo"><h4>Lalalala</h4></div> </div> <div id="rodape"> LALALA </div> </div> </body> </html>
o CSS:
body { margin:0px; font:11px Arial, Helvetica, sans-serif; } #geral { width:758px; text-align:left; position:relative; } #cabecalho { position:relative; padding:5px; height:55px; background-color:#0065ff; } #mnu_geral { position:relative; height:20px; background-color:#00418C; color:#ffffff; } #corpo { position:relative; width:758px; } #mnu_esq { position:relative; width:150px; float:left; } #conteudo { position:relative; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px; float:left; width:570px; border-left:#cccccc 17px solid; border-right:#cccccc 1px dashed; } #rodape { height:30px; background-color:#efefef; border-bottom:#00418C 2px dashed; text-align:right; } #rodape h5 { color:#00418C; font:14px Arial, Helvetica, sans-serif; font-weight:bold; float:right; padding:5px; } #rodape h6 { color:#aaaaaa; font:11px Arial, Helvetica, sans-serif; float:right; padding:5px; } #rodape img { float:left; padding:10px; } img { border:0px; } img.esq { float:left; } img.dir { float:right; } a.cal { text-decoration:none; color:#555555; } a.cal:hover { text-decoration:none; color:#000000; } .frm fieldset { border:1px solid #555555; } .frm legend { border:1px solid #555555; font-weight:bold; padding:2px 10px; } select { width:135px; background-color:#C1CDCD; color:#003366; font:11px Arial, Helvetica, sans-serif; } ul#menu { padding-right:0px; padding-left:0px; background:#0065FF; padding-bottom:0px; margin:0px; width:150px; padding-top:0px; list-style-type:none; } ul#menu li { border-right:#00418C 5px solid; border-bottom:#5E99F4 1px solid; } ul#menu li a:link { display:block; padding-left:5px; border-left:#00418C 8px solid; color:#ffffff; height:1%; font:11px Arial, Helvetica, sans-serif; text-decoration:none; } ul#menu li a:visited { display:block; padding-left:5px; border-left:#00418C 8px solid; color:#ffffff; height:1%; font:11px Arial, Helvetica, sans-serif; text-decoration:none; } ul#menu li a:hover { border-left:#00418C 8px solid; color:#ffcc00; background-color:#00418C; }
peço que o pessoal teste essa página no IE e no Firefox... No IE o rodapé vai ficar no lugar, porém no firefox ele fica "dentro" do div conteudo!
Abraço!