Fugindo um pouco de soluções específicas para o IE6 (já estava ficando cansativo!) vamos mostrar como fazer um hack específico para o navegador Safari e Google Chrome.
Sim, nós sabemos que usar hacks é “feio”, mas estamos aqui para apresentar soluções e, caso essa seja sua última opção, use!
Como os dois browsers utilizam a mesma engine de renderização, a Webkit, este hack acaba servindo para os dois navegadores:
body:nth-of-type(1) elemento { propriedade: valor; }
—–
* Update: Post atualizado, pois o hack antigo era interpretado pelo o IE7 também. Este novo método funciona somente para os navegadores Google Chrome e Safari.
17 2009 fevereiro
Autor: g3 em CSS
O post seguinte ensina como fazer um rodapé fixo no fim da página independente do conteúdo.
Primeiro passo é escrever um XHTML na seguinte estrutura:
...
<body>
<div id="limites">
<div id="conteudo" class="contemfloat">
<div id="coluna1">
Coluna 1
</div>
<div id="coluna2">
Coluna 2
</div>
</div>
<div id="rodape">
Rodapé
</div>
</div>
</body>
...
A div#rodape tem que estar no mesmo nível que a div#conteudo dentro da div#limites.
|-----------------------------------|
| body |
| |
| |-------------------------------| |
| | | |
| | limites | |
| | | |
| | |-------------------------| | |
| | | | | |
| | | conteudo | | |
| | | | | |
| | | |-------------------| | | |
| | | | coluna1 | | | |
| | | |-------------------| | | |
| | | | coluna2 | | | |
| | | |-------------------| | | |
| | | | | |
| | |-------------------------| | |
| | | |
| | |-------------------------| | |
| | | rodape | | |
| | |-------------------------| | |
| | | |
| |-------------------------------| |
Feito o XHTML escreva os seguintes estilos(CSS):
* { margin: 0; padding: 0; z-index: 1; }
html, body { height: 100%; }
/* contendo float */
.contemfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.contemfloat { display: inline-block; }
/* Hides from IE-mac \*/
* .contemfloat { height: 1%; }
.contemfloat { display: block; }
/* End hide from IE-mac */
#limites { position: relative; width: 600px; min-height: 100%; margin: 0 auto; background-color: #eee; }
* html #limites { height: 100%; }
#conteudo { padding-bottom: 80px; border-bottom: 1px solid red; }
#coluna1 { float: left; width: 400px; background-color: #ecc; }
#coluna2 { width: 200px; margin-left: 400px; background-color: gray; }
#rodape { position: absolute; bottom: 0; left: 0; width: 600px; height: 50px; padding-top: 10px; background-color: #cce; text-align: center; }
No html, body e div#limites precisam ter altura 100%. No caso da div#limites coloque altura mínima (min-height) 100%, mas como essa propriedade não renderiza no Internet Explorer 6 é preciso adicionar uma linha apenas para o IE6 com altura (height) 100%, isso funciona porque o IE6 não respeita uma altura definida caso o conteúdo do elemento ultrapasse essa altura.
Atenção, A div#limites tem posição relativa para possibilitar a div#rodape ficar sempre na base da div#limites em posição absoluta.
No XHTML foi inserido a classe “contemfloat” na div#conteudo porque dentro dela contém elemento com float.
No CSS a div#conteudo deve ter valor no padding-bottom igual ou maior que a altura da div#rodape, isso é feito para a div#rodape não ficar por cima da div#conteudo.
No exemplo a div#conteudo está com uma borda vermelha para mostrar o espaço do padding-bottom entre o conteúdo até a borda.
Veja o exemplo.
Já que estamos entrando no mundo “obscuro” dos hacks, iremos comentar sobre o caso específico do IE6, o qual temos que passar tantas vezes!
Ao adicionar esta linha em seu CSS, ela será interpretada somente pelo IE6:
* html { propriedade: valor; }
Particularmente preferimos adotar essa prática ao invés de um conditional comment para o IE6, para evitar de termos diversos CSS específicos para cada navegador. Portanto só usamos o CSS para IE7 caso seja extremamente necessário.
Além do mais, este hack é válido ao contrário de outras opções que encontramos em outros exemplos.
Uma boa maneira de fugirmos dos hacks é usar os conditional comments.
Por padrão, utilizamos este para o Internet Explorer 7, para evitarmos utilizar hack específico para este navegador:
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/estilo_ie7.css" media="screen" /><![endif]-->
Se quisermos fazer um CSS específico para o IE6, basta trocar o conditional comment:
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/estilo_ie7.css" media="screen" /><![endif]-->
Caso queira algum outro tipo específico, segue abaixo uma listagem de várias possibilidades:
<p><!--[if IE]>
De acordo com o conditional comment, este código é para Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
De acordo com o conditional comment, este código é para Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
De acordo com o conditional comment, este código é para Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
De acordo com o conditional comment, este código é para Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
De acordo com o conditional comment, este código é para Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
De acordo com o conditional comment, este código é para Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
De acordo com o conditional comment, este código é para Internet Explorer 5 e mais novos<br />
<![endif]-->
<!--[if lt IE 6]>
De acordo com o conditional comment, este código é para Internet Explorer mais antigo que 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
De acordo com o conditional comment, este código é para Internet Explorer mais antigo ou igual a 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
De acordo com o conditional comment, este código é para Internet Explorer mais novo que 6<br />
<![endif]-->
</p>
Uma das diversas limitações apresentadas pelo IE6 está relacionada ao uso de pseudo-classes. Uma delas é a “:hover” que só pode ser usada em links.
Porém, em alguns casos, precisamos dela para fazer determinados efeitos ou funcionalidades do site, como menus dropdown.
Para poder aplicar a pseudo-classe “:hover”, “:active” ou “:focus” em qualquer elemento no IE6, você deve:
– Baixar o arquivo .htc neste link;
– Inserir o código abaixo em seu CSS, utilizando o caminho do arquivo .htc relativo ao HTML:
body { behavior: url(css/csshover2.htc); } /* inclui efeito :hover, :active e :focus para Internet Explorer 6 */
Para usar o atributo target="_blank" para que links abram em uma nova janela sem usar window.open() e ainda ter seu XHTML Strict válido, basta incluir o seguinte trecho de código no cabeçalho da sua página:
window.onload = function() {
var links = document.links;
for (var i = 0, s = links.length; i < s; i++) {
if (links[i].rel == 'external') {
links[i].target = '_blank';
}
}
};
Usando jQuery, o trecho de código que deve ser incluído é bem menor:
$(document).ready(function() {
$('a[rel=external]').attr('target', '_blank');
});
Após usar este script, basta incluir o atributo rel="external" em seus links para que estes abram em nova janela:
&amp;lt;a href=&amp;quot;http://www.webstandards.blog.br/&amp;quot; title=&amp;quot;Melhor blog sobre Web Standards&amp;quot; rel=&amp;quot;external&amp;quot;&amp;gt;Blog Web Standards&amp;lt;/a&amp;gt;
Obs: este script foi escrito por Gustavo Straube.
Há uma forma de conseguirmos fazer um elemento “englobar” os elementos que nele estão inseridos, mesmo usando “float”.
Por exemplo, em uma galeria de imagens, onde cada <li> usa “float: left”, a lista, teoricamente, não conseguiria agregar todos os itens, pois estes usam “float”.
Para reverter este caso, basta usar a classe “contemfloat”, bastante utilizada em nossos projetos:
/* contendo float */
.contemfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.contemfloat { display: inline-block; }
/* Hides from IE-mac \*/
* .contemfloat { height: 1%; }
.contemfloat { display: block; }
/* End hide from IE-mac */
Caso você precise se algo mais rápido e prático, pode usar a propriedade overflow no CSS dessa forma:
overflow: hidden;
O problema, como sabemos, é que o overflow: hidden; é algo bem específico caso você não tenha definido largura ou altura para o elemento, caso contrário teremos problemas!
