Botões usando imagens - Bug no IE6

[alexandre h. 1]

Galera to passando por um problema gravíssimo, do qual não estou entendendo o porque, mesmo estando em cima disso por dois dias inteiros.

 

É um bug do qual não achei nenhuma informação em foruns nem tutoriais, e acho muito estranho pois fiz varios testes e o problema persiste mesmo depois de eu revisar o codigo diversas vezes e pesquisar a respeito.

 

Bem, o negócio é que estou fazendo um menu com rollover de imagem, com puro CSS. A principio funciona muito bem, eu testando no meu PC funciona em todos os browsers, mas quando coloquei na internet pra testar, surgiu um bug no IE6 apenas. FF e IE7 rolou bem. Repito, o bug só ocorre quando está na internet.

 

O que acontece é o seguinte: passando o mouse sobre os botoes, os mesmos piscam, não importando se a imagem já foi carregada ou não, piscam de qualquer forma sempre.

 

peço que visitem o link para visualizar: http://host297enx.plugin.com.br/rdesign

 

Estou muito confuso com o problema pois sempre fiz botoes desta mesma forma, em diversos sites, e sempre funcionou bem. Já tentei comparar os codigos e são exatamente iguais. Por favor se alguem puder me ajudar ficaria muito grato. Abaixo vou colocar os codigos dos botoes:

 

 

<div id="menu">

<div class="btn_blog"><a href="blog.html"> </a>

</div>

<div class="btn_rdesign"><a href="#"> </a>

</div>

<div class="btn_atividades"><a href="#"> </a>

</div>

<div class="btn_a_cidade"><a href="a_cidade.html" > </a>

</div>

<div class="btn_arquivos"><a href="arquivos.html" > </a>

</div>

<div class="btn_inscricoes"><a href="inscricoes.html" > </a>

</div>

<div class="btn_contato"><a href="contato.html" > </a>

</div>

</div>

 

---------------------------------------------

 

.btn_blog a {

width: 78px;

height: 30px;

position: relative;

float: left;

margin-right: 6px;

display: block;

background-image: url(../img/btn_blog_normal.gif);

text-decoration: none;

}

 

.btn_blog a:hover {

background-image: url(../img/btn_blog_hover.gif);

text-decoration: none;

}

 

 

os outros botoes sao iguais, só alteram as imagens.

[alexandre h. 1]

Bem, mesmo que ninguém tenha respondido, gostaria de postar aqui o que eu pesquisei sobre o problema.

 

Achei alguns artigos na internet a respeito de "Flickering css background images on Internet Explorer 6"

 

 

Aqui alguns links que achei:

 

http://www.webreference.com/programming/cs...cker/index.html

 

http://www.fivesevensix.com/studies/ie6flicker/

 

http://www.ibloomstudios.com/articles/css_...ernet_explorer/

 

http://evil.che.lu/2006/9/25/no-more-ie6-background-flicker

 

 

Depois de achar estes artigos, achei que fosse conseguir resolver o problema, já que eles falam exatamente do problema que estava tendo, ou seja, imagens hover de css que o Internet Explorer fica lendo, causando o "flickering", ou seja, piscando.

 

Usei os métodos que eles propunham, que eram JavaScripts. Não funcionou.

 

Pesquisando um pouco mais, percebi que o problema ocorre em duas situações diferentes: a primeira é esta que eles falam, e que realmente tem solução com este Java. O que acontece nestes casos diz respeito a uma opção no internet explorer que alguns usuarios usam para que as imagens sejam carregadas a cada visita. Se voces forem nas opções do browser verão isto...

 

Infelizmente este não é o meu problema, pois mesmo com o browser na opção normal, que é a "Automática", o flickering ocorre.

 

Como não consegui resolver o meu problema do jeito certo, oq eu fiz, devido ao meu prazo de entrega do site, foi "enjambrar". Ou seja, coloquei uma imagem de background no fundo do menu, e de qualquer outro botao, enganando o usuario. A imagem continua piscando, porém não dá pra ver. Digamos que é um jeito "burro" de resolver o problema. Na minha opinião é um passo atrás, já que o CSS é justamente uma linguagem pra facilitar e deixar o código "mais bonito" e simples.

 

Peço mais uma vez que visitem o site que estou montando no qual ocorre o problema:

 

http://www.add-digital.com.br/rdesign

 

Acho muito estranho este bug, pois o códgio está corretíssimo, já revisei trocentas vezes, já refiz tudo e nada. E o mais estranho é que nunca li nenhum desenvolvedor falar deste porblema. Gostaria muito de saber se os especialistas em CSS, como o Bruno ou o Maujor conhecem isto.

 

 

Abraço

[Guilherme Rambo 4]

Alexandre, já tentou a técnica de CSS Sprite?

 

http://www.web2ponto0.com.br/video-1-css-sprites/

 

[]'s

[alexandre h. 1]

Interessante solução! Ainda não conhecia esta técnica.De qualquer forma, gostaria de saber pq acontece o "flickering"...