Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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, já tentou a técnica de CSS Sprite?
http://www.web2ponto0.com.br/video-1-css-sprites/
[]'s
Interessante solução! Ainda não conhecia esta técnica.De qualquer forma, gostaria de saber pq acontece o "flickering"...
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