Coleção dicas CSS

Em: CSS

7 jun 2007

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 para ‘Coleção dicas CSS‘

Avatar

Sandro Alencar Fernandes

08/06/2007 às 9:25 pm

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.

Avatar

Keidi Nienkotter

27/08/2007 às 3:01 pm

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.

Deixe seu comentário

  • Tweets that mention É big.. É big.. - Blog Área Local -- Topsy.com: [...] This post was mentioned on Twitter by Área Local, Cristhian-Xthor. Cristhian-Xthor said: Para [...]
  • Máira: Muito obrigada! Sucesso para nós... que nascemos no mesmo dia né?! Daqui pra cima, sempre! [...]
  • Carlos Antonio: Fala galera! Parabéns pelos 6 anos de vida da Área Local e pelo sucesso da empresa! Grande abra [...]
  • Karina: Parabéns equipe Área Local. Sucesso! Tenho muito orgulho de vocês... [...]
  • Remo: É isso aí pessoal! Parabéns para a galera toda, vamos em frente e que venham mais e mais desafios [...]