CSS Para Definir Largura Mínima no IE 6

IE Sucks!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 :-D .

| | | | |

Leia Também

9 Respostas para “CSS Para Definir Largura Mínima no IE 6”

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

  2. Quilometros de linhas de código por causa de um navegador. Tem coisas muito mal-feitas mesmo.

  3. Esse minha figura do avatar ficou muito gay :S

  4. Onde no template colocar esse codigo?

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

  6. 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?

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

  8. Caraca, coisas que só o IE fazem por vc… Vamos ver como vai ficar o 8, com os “padrões web”.

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