Min-Height e Max-Height para IE usando css condicional

Assim com o exemplo de :first-child e :last-child, para usar min-height e max-height é necessário css condicional.

Na verdade é bem simples, vamos supor que temos uma div que tem que ter uma altura mínima pra não “quebrar o layout”

<div class="post">
	Lorem Ipsum Fusce rutrum nibh.
</div>

E agora o CSS para ficar no mínimo com 200px por exemplo:

div.post { 
    height: expression(this.scrollHeight <= "200" ? "200" : "auto");
    min-height: 200px; /* para ff, safari, chrome, etc */
}
&#91;/sourcecode&#93;

E se fosse max-height seria assim : 

&#91;sourcecode language="css"&#93;
div.post { 
    height: expression(this.scrollHeight >= "200" ? "200" : "auto");
    max-height: 200px; /* para ff, safari, chrome, etc */
}

Isso resolve também alguns problemas com float e position absolute onde a div não calcula automaticamente a altura do elemento com float dentro da div.

Convencendo os usuários a esquecer o IE



Como o último post sobre a Microsoft foi muitíssimo polêmico, vou colocar um pouco mais de lenha na fogueira: apresento a vocês um plugin de Jquery para convencer os usuários a abandonarem o IE. Quem desenvolveu o plugin foi o pessoal do CSS Lab, o que justifica o nome “KillIE”, já que a esse navegador faz pior a vida de todos os htmlers e css’ers.

Indo um pouco na onda do que a Microsoft fez no Hotmail para o Chrome, o plugin exibe uma mensagem no alto da página, recomendando o uso de um outro navegador.

A versão original do plugin traz o texto “You’re using Internet Explorer 6, which is a terrible browser. Why don’t you try Firefox?”, mas você pode configurar outro texto, e se quer que ele apareça para o IE6 ou o IE7, e o navegador que deseja recomendar.

Exemplo do KillIE em funcionamento no IE6

Utilizar o plugin, é ainda mais fácil do que falar mal do IE, basta invocar o Jquery e o plugin:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.killIE.js" type="text/javascript"></script>

Baixe aqui o Jquery e o KillIE

Depois, invoque o código do KillIE:

$(document).ready(function(){
$().killIE();
});

Para ver funcionando, entre aqui com o IE6.

Mas agora, depois que você já aprendeu a instalar o plugin, um lembrete: (deixando um pouco meu lado “interfacer” (amador) de lado, e falando como defensora do usuário que preciso ser) esse tipo de medida é arbitrária, e desaconselhável na maioria das vezes. Obrigar o usuário a conviver com uma mensagem amarela horrorosa, falando que o navegador dele é “terrível”, é uma atitude tão ruim quanto as que a Microsoft costuma tomar. Na verdade, parte do nosso trabalho é fazer as coisas boas para todo mundo, mesmo pra quem usa o famigerado IE6 ;)

Boa sexta-feira pra todo mundo!

[VÍDEO] A história da guerra dos Browsers

Em meio a guerra dos browsers com o lancamento do Google Chrome, a Discovery exibiu na semana passada um documentário interessante: A internet – guerra dos navegadores.

O documentário conta a história do sucesso do primeiro navegador, que 12 pessoas ganharam uma cópia e logo se tornou 1 milhão de usuários e acabou se tornando o Netscape que teve anos hegemonia até que a Microsoft integrou o Internet Explorer no Windows.

O Vídeo está dublado em português. Vale a pena assistir (quem tiver 42 minutos livres).

Outros documentários sobre internet serão exibidos ao longo do mês, a programação está disponível aqui.

Firebug Lite: Firebug para IE, Opera e Safari

A famosa extensão para firefox ganhou uma solução para os demais browsers, o firebug lite. Não é a mesma maravilha, mas dá pra quebrar um galho na hora de procurar onde é que está a cagada.

firebug-lite

Veja o Firebug Lite em funcionamento clicando aqui.

Funciona diferente, é um arquivo javascript que você deve invocar dentro da tag head da sua página.

<script type='text/javascript' src='js/firebug-lite.js'></script>

Além de obter todo o css dos elementos, é possível adicionar css. A página também passa a aceitar console.log(‘teste’); para testar, ao invés de ficar dando alert(‘teste’);

A documentação completa está disponível no site do firebug lite.

Para quem procura ferramentas de auxílio no desenvolvimento para o IE, recomendo também :

IE developer toolbar
ie developer toolbar
Bom para corrigir erros de layout / css. É possível inspecionar, obter e alterar todo o css de um elemento.

E o Debug bar.
Debug Bar
Esse é melhor para corrigir erros de javascript, lista todas os scripts e as funções e é possível executar javascript a partir de seu console.