CSSrollover problem (IE)

[discus]

Hi all,

i moved my question from the HTML forum here, as this is probably the right place for this problem.

I made 4 nav buttons using CSS rollover technique (at http://4demo6.tripod.com ).
FIREFOX does it fine, but the trouble is with IE.
When you move mouse over the buttons they disappear, and then IE downloads them again??? :eek:

What's wrong with my CSS code?

Thank you very much

[RGL]

I'm using IE and I'm not seeing your problem. When I mouse over the buttons they change but do not disappear.

[ewallace]

They are also looking fine on my end. At least they look the same in both FF and IE.
-E

[toicontien]

The problem is with Internet Explorer. If you have a certain version, or certain cache settings, IE-Win does not cache images properly. This is true in the two cases below:

1) You have Internet Explorer 6, Service Pack 1, I believe

2) In the Internet Explorer Options (Tools > Internet Options), under the General Tab, and click the Settings button, "Check for newer versions of stored pages:" is set to "Every visit to the page".

Those are the two cases where you'll notice that IE-Win flashes the graphic offscreen then shows it again with CSS rollovers. I think Service Pack 2 solves this problem, but it will still creep up in SP2 if you have the setting to check for newer pages set to every visit.

Internet Explorer is actually redownloading the images from the server every time you mouse over, and then mouse out, of the links.

[discus]

Thanks for the replies.

1) I'm using IE 6.0.2900.2180 - SP2
2) "Check for newer versions of stored pages:" is set to "Never".

I have the similar problem with IE using JS preload technique (only the buttons do not disappear, but preloading doesn't work - http://4demo5.tripod.com).
That's the reason (suggestion of the forum moderator Charles), why i tried with CSS. And now i face the same issue. :confused:

Is this problem an unsolvable twilight zone (just for me), and should i simply give it all up, and go to mountains enjoy the nature?

[toicontien]

I'm on IE 6.0.2900.2180.xpsp_sp2gdr.050301-1519. I'm using Windows XP, are you using Win2k or 98 perhaps? It works fine for me. Try setting your "check for newer versions of pages" to "automatically." That's what I've got my IE install set to, in hindsight.

[Kravvitz]

Maybe this will help: http://www.fivesevensix.com/studies/ie6flicker/

[discus]

My IE is 6.0.2900.2180.xpsp_sp2rtm.040803-2158.
OS is XPsp2.
Putting 'Check' to 'Autmatically' doesn't help.

But there is an interesting thing with IE behavior comparing examples from the Kravvitz's link (thanks), and my page.

If i set 'Check' to 'Every visit', "should flicker" examples flicker (temporarily disappear) indeed, but by hovering "doesn't flicker" images i get some garbage in place of an image (part of some text, part of image), so although the author says "This image does not flicker because ..." that image is not shown properly in my IE.

If i set IE"Check" to something else than "Every visit" IE indeed works fine with all images on the page - means that solves the problem.

Yet this doesn't work on my page, which makes me to think that something's still wrong in my CSS code.

(Although i don't understand how does it work to other people, so get more and more confused ??)

I'm going now to investigate all that code from linked pages, and maybe find something.

Thanks

[toicontien]

Perhaps it's a difference between the example pages being rendered in Standards Mode and your page being rendered in Quirks mode. Do you have a full doctype at the beginning of your document, that also includes the URL to a valid HTML DTD file? You can also see the "About Doctypes" link in my signature.

[discus]

Hi toicontien,

in the meanwhile a few more unbelievable things happened! :eek:

Firstable i have had a proper DOCTYPE (given by DW7), but it was 'HTML 4.01 Transitional'.

1) Then i changed it to 'HTML 4.01 Strict' from your thread, and the following happened:
When i hovered the buttons for first time, they worked just fine, BUT JUST FOR THAT FIRST TIME, and never again!! :eek: I tried to clear IE cache and cookies, reload, restart IE ... without any further success.

2) Subsequently i tried with overflow: hidden; in each button's class, and exactly the same thing as with DOCTYPE change happened (worked for just 1 time, and never again). :eek:

3) Then, i tried to implement solution(s) from Kravvitz's link.
All those shoulds and shouldn'ts didn't help, unless maybe the last one, with 'image duplicating'. Did i understand it right, that i need ( besides the doubled images which i already have), an extra set of hover state images ??

4) And finaly i made a mistake in the html code for button 'galerija', and VOILA it works. :eek: It makes no sense at all but it works. :eek:
here is the mistake:
<tr>
<td><div id="GA"><a id="galerija" href="#"></div></a></td>
</tr>
'GA' is surrounding tag that contains a duplicated image (which i didn't succeed to arrange in css style - which image? which position? ...)

Maybe all this can help you to help me.


Thanks

[discus]

I checked my page (http://4demo6.tripod.com) with 3 other computers.

0) my comp (IE6 sp2): flicker*
1) IE6 sp2: doesn't flicker
2) unknown(due to privil. restrictions): flicker*
3) IE6 sp1: doesn't flicker
*button 'galerija' doesn't flicker anymore, since i've applied a wrong code :) to it (see previous post)

Is there any explanation for all this?

[discus]

Ladies and Gentlemen,

i am pleased to take this opportunity, to announce that, thanks to Trifecta Button Almighty (http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.shtml), the flickering mystery with IE6 is finally solved (with or without "Every visit .." off).

and an example:
http://www.search-this.com/css_buttons2.html

So that my rollover buttons work just splendid! :cool:
The raw solution (although i don't understand it fully) is on http://4demo7.tripod.com.


But 1 more question.
I have no clue what's the meaning of * html in CSS style code.

Thanks

[Kravvitz]

Congratulations :)

But 1 more question.
I have no clue what's the meaning of * html in CSS style code.
That's the Star HTML hack (read this) (http://www.centricle.com/ref/css/filters/tests/star_html/).

[toicontien]

And then visit this link in Kravvitz' signature: If you know what CSS Hacks are, please read this and vote. (http://www.positioniseverything.net/articles/poll/star-html.php)

Internet Explorer 7 has dropped support for "* html foo" and it has added support for the child selector ">". This means that * html CSS hacks won't work on IE7. But in this case, I think the rollover BG image problem is fixed in IE7, so the * html hack won't harm anything.

[discus]

Thanks again to toicontien and Kravvitz :)