lacunas no firefox e opera

[Kadu! DG 0]

fala pessoas tudo bem?

estou precisando da ajuda de vocês, estou criando um layout css, então me deparei com um problema nos navegadores opera e firefox...

a div corpo, não fica do tamanho correto, ou seja, não "cobre" todas as divs que estão dentro dela...assim ficam diversas lacunas no site...gostaria de saber o que fiz de errado par aisso acontecer...aqui vcs tem um link para ver como ficou....no ie 7 fica perfeito...

 

aqui está o meu css:

@charset "utf-8";
/* 
   K! Design - Conceito, Estilo e Objetivos.
   [url="http://www.kdsg.net"]http://www.kdsg.net[/url]
   ------------------------------------------------
   Folhas de estilos criada por: Caio Eduardo, Kadu
   Contato: kadu@kdsg.net
*/

BODY {
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
background-color:#e8e2d9;
background-image:url(../imagens/bgs/bg.jpg);
background-position:center;
background-repeat:repeat-y;
	}
	
div#corpo {
border-left: #231F20 solid 5px;
border-right:#231F20 solid 5px;
background-color:#FFFFFF;
width: 770px;
font-family:Arial 11px;
margin:0 auto;
padding-top:5px;
height:auto;
font-family: Arial;
font-size: 12px;
}

div#logo {
width: 590px;
height: 90px;
display: block;
background: url(../imagens/site/logo_topo.jpg) no-repeat left top transparent;
background-color:#ffffff;
margin-left:5px;
float:left;
}

div#contato_topo {
width:164px;
height:70px;
display:block;
background:url(../imagens/site/+contato.jpg) no-repeat left top transparent;
background-color:#FFFFFF;
float:right;
margin-right:10px;
margin-top:7px;
}

div#separa_topo {
width:100%;
height:7px;
display:block;
background:url(../imagens/bgs/bg_separacao.jpg) left top transparent;
background-color:#FFFFFF;
float:right;
margin-top:2px;
}

div#data {
width:768px;
height:15px;
display:block;
background-color:#FFFFFF;
float:left;
margin-top:1px;
margin-bottom:2px;
font-family: Arial;
font-size: 12px;
padding-left:2px;
}

div#menu {
width:115px;
height:595px;
display:block;
background-color:#e3dcd1;
float:left;
margin-top:1px;
font-family: Arial;
font-weight:bold;
font-size: 12px;
padding-left:2px;
color:#ffffff;
border-bottom:#C2B59B solid 3px;
border-right:#C2B59B solid 3px;
border-top:#C2B59B solid 3px;
background-image:url(../imagens/bgs/bg_menu.jpg);
padding-top:5px;
}

div#conteudo {
font-family: Arial;
font-size: 12px;
width:645px;
background:#FFFFFF;
float:left;
margin-left:5px;
}

[webflex 0]

Olá,

 

Experimente zerar todos os valores do margin e padding para 0px:

* { margin: 0px; padding: 0px; }

Cumps \o/

[Kadu! DG 0]

fala web td certo, então fiz isso e não aconteceu nada! você poderia me falar o pq do "*" antes da chave?

 

será que o meu código está bagunçado pq estou usando muitas div, e algumas só para uma imagem como bg?

pois assim as minhas imagem não ficariam "selecionáveis", por isso que fiz assim....

[Guilherme Rambo 4]

Isso acontece por que tudo dentro da div corpo tá flutuando, então ela não acompanha seu conteúdo interno. No IE6 acompanha por padrão, o que é errado. Segue um código pra resolver isso:

 

div#corpo:after {
content:"-";
clear:both;
display:block;
height:1px;
visibility:hidden;
}

[]'s

[Kadu! DG 0]

nossa inside, ajudou e muito!

você poderia me explicar o que seria esse content?

 

muito obrigado!!

 

agora tem uma coisinha que eu gostaria de perguntar...a paradinha é a seguinte...eu tenho esse bg aqui: link

 

só que eu coloquei ele como bg "geral", do tamanho certo para ficar renta as bordas da div corpo. só, rola o seguinte, ele ocupa toda a área existente no browser no eixo Y (horizontal), mesmo a div corpo não ocupando toda essa área, eu queria que e ele só ficasse do tamanho que a div corpo ficar....tem jeito de fazer isso?

 

então, para ajudar um pouco, eu vi o efeito nesse site: http://blogblogs.com.br/