07/06/2007

Coleção dicas CSS

Mais andança pela net! Esta dica vem em boa hora, eu já estava fazendo gambiarra para corrigir o problema que descrevo abaixo.
Quando dentro de um DIV temos algum (ou alguns) elemento utilizando a propriedade FLOAT, acontece algo muito ruim (principalmente para sites dinâmicos que o usuário atualiza o conteúdo), o DIV não assume o tamanho do conteúdo que possui a propriedade Float, como acontece no exemplo.
O site Pinceladas da Web da a dica e repasso aqui.
#box {
min-height:128px;
height:auto !important;
height:128px;
padding:5px;
}
#box img {
float:left;
}

A propriedade min-height estabelece uma altura mínima para o elemento, esta propriedade não funciona no Internet Explorer, sendo que ele interpreta o atributo height como min-height, por isso estabeleci height:128px;. Agora paras os browsers que interpretam corretamente a propriedade height e min-height, não tenham uma altura fixa, por isso foi utilizado height: auto !important, estabelhecendo-lhe uma altura automática, dando-lhe uma maior prioridade a esta declaração fazendo o uso de !important, que não é interpretada pelo Internet Explorer.

Aqui o exemplo funcionando corretamente.
Ps: para os curiosos que querem saber qual gambiarra eu estava usando neste caso, fiquem esperando sentados ou vasculhem os códigos de sites já no ar, porque eu não vou falar. Tenho vergonha.
😉