CSS Para Definir Largura Mínima no IE 6

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 .