Resolvendo problemas de incompatibilidade com outros navegadores na utilização do atributo height setado com o valor auto.
Quando setamos o valor de auto no valor da altura de um div, este valor não é bem interpretado pelos navegadores firefox e google chrome.
Veja o código com erro:
#principal {
height:auto;
margin: 0px 8px 0px 0px;
background-color:#FFFFFF
}
#left {
width:224px;
float:left;
height:auto;
display:inline;
background-color:#ffffff;
}
#right {
position:absolute;
left:224px;
width:554px;
height:527px;
background:#ffffff repeat;
}
O div#principal engloba os div#left e div#right. Todo o conteúdo do site é carregado no div#right.
O que acontece de errado, então?
Vou dar um exemplo do que aconteceu comigo. No site que desenvolvi, ao clicar no botão contato, um formulário era carregado dentro do div#right (via php), porém os campos de edição e os botãos não funcionavam corretamente. Dava a impressão de estarem desabilitados.
Após, vários testes em busca de solução descobri que height:auto não era interpretado corretamente por alguns navegadores.
Fui em busca da solução e encontreeeeiiiiiii…
Bastou acrescentar min-height:100% e overflow:hidden dentro div#principal.
Veja o código completo:
#principal {
height:auto;
min-height:100%;
overflow:hidden;
margin: 0px 8px 0px 0px;
background-color:#FFFFFF
}
#left {
width:224px;
float:left;
height:auto;
display:inline;
background-color:#ffffff;
}
#right {
position:absolute;
left:224px;
width:554px;
height:527px;
background:#ffffff repeat;
}