ERR_CONTENT_DECODING_FAILED no Google Chrome

Eu tive um problema no navegador Google Chrome com o Tadarank.com esses dias.

A página não aparecia no Chrome de jeito nenhum. Exibia um erro:

Error 330 (net::ERR_CONTENT_DECODING_FAILED)


Dando uma pesquisada na net, vi que meu caso poderia ter a ver com encoding Gzip, essas paradas...


Daí resolvi trocando:
header('Content-Encoding: gzip, deflate');


Por
header('Content-Encoding: zlib, deflate, gzip');


Pronto. O problema sumiu.
Talvez esta postagem seja útil pra você. Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Ativando .hover e .first-child no IE 6 - um novo método

Tamo de volta malucada

Todos aqui devem saber que as pseudo-classes do CSS 2 :hover e :first-child não funcionam direito no IE6 né? A hover só funciona em links.

Porém vossas senhorias já devem conhecer inúmeras ténicas secretas ninja para simular as pseudo classe hover e first-child no IE 6 né? Técnicas com javascript simples, técnicas com libs javascript, arquivo htc, etc

Abaixo eu mostro uma nova técnica que o mico inventou enquanto estava desenvolvendo sua Micox-mini-css-lib (em breve em um blog perto de você).

A vantagem da minha criança é que ela pode ser colocada direto no seu CSS, em qualquer lugar dele (de preferencia no começo). Ela é baseada em javascript dentro do CSS.

Para ativar, você deve usar as classes .hover em conjunto com a :hover OU .first-child em conjunto com a :first-child nos elementos onde deseja o efeito. Tipo assim:

li:first-child , li.first-child { color: red }

Abaixo, o código que faz a mágica e deve ser colocado no começo FINAL do seu css. Quem não entender me pergunta nos comments.

Micox Pseudo-class-css2 to IE (MXPC)

/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6 
   Deixe isto ao final de tudo do seu CSS pois o Webkit não interpreta nada mais abaixo do expression
*/
* html * { color: expression( (function(who){ if(!who.MXPC){
 who.MXPC = '1';
 if(who.nodeName != 'A'){
  who.onmouseenter=function(){ who.className += ' hover'};
  who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
 (who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }

/* example */
p:first-child , p.first-child { color: red }
li:hover a , li.hover a { background-color: blue }

"Viiixxxxxx maria, onde eu coloco isso mico?" - Não tema o código Sr.! Apenas coloque ele no começo FINAL do seu CSS. Veja esta página de exemplo e zóie o código fonte dela.

O bom é que esta idéia do expression pode ser usada para outras gambiarras também. Em breve eu devo voltar com mais.

Em breve tô de volta. Té mais.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Simulando position fixed no Internet Explorer (IE) - sem javascript

Bom, todo mundo sabe que a propriedade position igual a fixed faz com que o elemento fique fixo na janela do browser independente da movimentação da barra de rolagem.

Isto é uma verdade pra navegadores que seguem bem os padrões (OP, FF,etc) mas para o IE (Internet Explorer até o 7) isto não funciona. Simplesmente não funciona.

Como resolver isto SEM JAVASCRIPT só no CSS?

Primeiramente imagine duas divs dentro de um documento:

- Uma das divs tem dimensões de 400x400, tem um texto gigantesco como conteúdo, porém seu overflow é scroll, o que permite que seja possível ler o conteúdo gigantesco.

- A outra div é uma pequena imagem de 25x25 que está posicionada exatamente sobre a div do conteúdo anterior.

...

Bom, se eu mexer a barra de rolagem da div do conteúdo não irá interferir em nada na movimentação da div que tem a imagem. A imagem continuará quieta sobre o texto.

Bingo!! Agora é só aumentar o tamanho da div com conteúdo pra ocupar a janela inteira.

Pra você não ter que quebrar a cabeça eu já deixei o código prontim só pra você inserir no seu documento (e fazer adaptações se achar necessário).

O Exemplo: Simulando position fixed no Internet Explorer - IE

O código pronto

<style type="text/css">
 /* FAZ OS POSITION FIXED NOS NAVEGADORES PADRÃO (não mexa) */
 .fixed { position: fixed !important; }
</style>
<!--[if lt IE 7]>
 <style type="text/css">
  /* FAZ O POSITION FIXED PARA O IE (não mexa).
   Para funcionar o DTD do documento deve estar correto. E não ser quirksMode
   By Micox - micoxjcg@yahoo.com.br - elmicox.com - elmicox.blogspot.com
   */
  .fixed { position: absolute !important; }
  body { height: 100% !important; width: 100% !important; 
      margin: 0 !important; position: relative;  }
  html { overflow-y: hidden !important;  }
  #newbody { position: relative !important; overflow-y: scroll !important; 
       height: 100% !important; width: 100% !important; margin: 0 !important; }
 </style>
<![endif]-->

<style type="text/css">
 /* COLOQUE AQUI O RESTANTE DAS ESTILIZAÇÕES QUE NÃO TENHAM A VER COM POSITION FIXED
    MAS NÃO DECLARE MARGINS, PADDINGS, POSITIONS, DIMENSÕES OU OVERFLOWS PARA HTML, BODY E NEWBODY
 */
 
</style>

Detalhes:

Da mesma forma que está no exemplo, deverá haver um elemento pai chamado newbody que conterá todo o conteúdo não-fixed e, fora deste, deverão estar todos os elementos que desejar que sejam fixed. Olha o exemplo lá que vai entender.

A página não pode ser renderizada no quirks mode, ou seja, deve estar com o document type definition (DTD) correto;

Pode dar boró se alterar margin, padding, posições, dimensões ou overflows para os elementos HTML, body e newbody.

Perceba que não é aproveitamento de bug do IE. É apenas uma técnica que também funcionaria em outros navegadores se fosse necessário usar.

Muitos gringos já falaram sobre a técnica, mas aqui no Brasol parece que ninguém falou ainda. Estranho...:

Comenta aí malucada. Ninguém comenta mais :(

Publicado também no elmicox.com

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.