Mais uma para quem está cansado de apanhar do Internet Explorer.
O nunca suficientemente amaldiçoado IE 6 não entende uma coisa simples como largura mínima definida no CSS.
Isso é um problema em templates fluídos, já que, conforme o tamanho da tela e a resolução utilizados, o site pode ficar completamente desfigurado.
Explico:
Template fluído ou elástico é aquele que se adapta a qualquer definição utilizada, preenchendo sempre a tela.
Por que é preciso uma largura mínima?
Porque ao exibir imagens, elas não vão se adaptar à qualquer largura, então é interessante definir até onde o template pode encolher.
No Firefox e outros, isso é feito de forma fácil, adicionando o seguinte código ao div em questão:
#div em questão {min-width: 500px;}
Simples assim, quando uma resolução menor é utilizada, essa div vaii manter sempre um mínimo de 500px de largura.
O problema é que o IE 6 não entende isso e não obedece, o mal-criado, literalmente.
Porém, existe uma definição que só ele entende, mas não conta para ninguém. Ela se chama “expression”, e resolve definitivamente o problema.
Utilizando o exemplo anterior como base:
#div em questão { width:100%; min-width: 700px; }
#div em questão { width:100%; width: expression( document.body.clientWidth < 701 ? "700px" : "auto" ); min-width:700px; }
Problema resolvido.
Traduzindo o código:
Se o navegador utilizado pelo visitante for o IE, quando o espaço for menor do que 701px, ele definirá 700px fixos.
Qualquer outro navegador vai ignorar esse trecho e ir direto para o final, onde é definido min-width:700px;
De nada 
.
| Tweet | Compartilhar |
Siga-me no Twitter
Torne-se Fã no Facebook
Assine o RSS Feed
Assine a Newsletter
Esse IE só complica a vida de todo mundo, não é fácil. E ainda quando não contamos com um conhecimento aprofundado nesta área, e temos que fazer funcionar assim mesmo, entra em ação o POG.
Quilometros de linhas de código por causa de um navegador. Tem coisas muito mal-feitas mesmo.
Esse minha figura do avatar ficou muito gay :S
Onde no template colocar esse codigo?
Henrique,
Cadastra teu avatar e email no gravatar.com que resolve
Cilene,
Deve ser colocado no div onde se quer determinar a largura mínima. Normalmente é utilizado no #main_content ou equivalente.
O valor de 700px foi usado como exemplo, funciona com qualquer valor. Eu usaria 480px, que engloba a largura da maioria das imagens.
Não sei o quanto isso pode ser relevante para alguns usuários mas acho que cabe dizer que utilizando expressões o CSS não vai ser válido de acordo com o W3C
OU, estou errado e tem algum jeito de validar CSS mesmo utilizando expressões?
Dario,
Não fiz o teste, até porque o tipo de anúncio que eu uso já não permite a validação. O que dever ser o caso de 9 em cada 10.
Caraca, coisas que só o IE fazem por vc… Vamos ver como vai ficar o 8, com os “padrões web”.
Cara isso funcionou para o IE 7 mas não para o IE6
To com uma certa urgência para fazer isso funcionar, mas de qualquer forma obrigado