Coleção dicas CSS

por Administrador - 07/06/2007 - 21:13

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.
😉

2 Comentários :
Keidi Nienkotter:

Em alguns casos é possível também utilizar um display: table; no lugar de "min-height:128px; height:auto !important; height:128px;" É bom para quando você não tem noção do tamanho mínimo que deve ser utilizado. Dica da Scheilinha.
Sandro Alencar Fernandes:

Poxa, já tava ficando curioso, dá uma dica do site que tem a gambi e se possível o elemento. No mais legal a solução, já havia passado por isso é também utilizei de gambis.

Escreva um comentário:


O seu endereço de e-mail não será publicado.