Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.
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.
* Update: Solução nos comentários, alguns usuários comentaram a mesma solução, conforme a necessidade verifique esses comentários, pois raramente fazemos ajuste apenas no chrome.
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.
Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.
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.
* Update: Classe no html. Como usamos html5, colocamos na tag html por conditional comments uma classe relativa ao navegador Internet Explorer.
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:
<!--[if IE]>
De acordo com o conditional comment, este código é para Internet Explorer
<![endif]-->
<!--[if IE 5]>
De acordo com o conditional comment, este código é para Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
De acordo com o conditional comment, este código é para Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
De acordo com o conditional comment, este código é para Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
De acordo com o conditional comment, este código é para Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
De acordo com o conditional comment, este código é para Internet Explorer 7
<![endif]-->
<!--[if gte IE 5]>
De acordo com o conditional comment, este código é para Internet Explorer 5 e mais novos
<![endif]-->
<!--[if lt IE 6]>
De acordo com o conditional comment, este código é para Internet Explorer mais antigo que 6
<![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
<![endif]-->
<!--[if gt IE 6]>
De acordo com o conditional comment, este código é para Internet Explorer mais novo que 6
<![endif]-->
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.
Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.
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;
* Update: Reformulação do CSS padrão. Procuramos evitar o uso desse método, preferimos optar pelo uso do overflow e caso exista problema com o IE6 incluímos “height: 1%;” apenas para esse navegador.
