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!
