View Full Version : IE6 disappearing/reappearing text and backgrounds

Jan 16th, 2009, 01:07 AM
I'm wrapping up development of a site, and I've squashed nearly all cross-browser inconsistencies except for this one and it's driving me nuts. In IE6, certain elements disappear (a) when I rollover one of the header links, and (b) when my javascript-based scroller loads a new frame (based on Featured Content Scroller 2.4 from Dynamic Drive).

At first I thought it was an IE6 Javascript issue, but after removing all of my script references, I still have the same issue.

Here's the link to the live test site: http://scenesarasota.leblancstudios.com - The red headers in the sidebar disappear when a new frame loads in the featured content scroller, and on mouseover on the navbar above.

I've also removed all of the Javascripts here: http://scenesarasota.leblancstudios.com/test.html - but the issue still occurs from the navbar (but only on the second row - Home, Subscribe Now, Advertise With Us, FAQ).

Also, on this page: http://scenesarasota.leblancstudios.com/inside.html - Scroll down just past the Featured Content Scroller, and after a while the main content div (from INSIDE SCENE down to the YEAR drop-down) will also disappear revealing the grey containing div underneath.

Finally, scroll any disappeared content off screen and then back again, it magically reappears/disappears like rolling down a foggy window. This is one of the more fascinating aspects, since it seems to indicate that it's not purely a hover-state issue.

Has anyone seen anything like this before? Any suggestions for this?



Jan 16th, 2009, 03:33 AM
Without having looked at it due to the current lack of an Internet Explorer this sounds very much like some hasLayout (http://satzansatz.de/cssd/onhavinglayout.html) issues that can easily be fixed if one knows about them. Most of IE’s issues are results of elements having or not having “layout”. Once I learned that all my astonishment was gone if something looked weird in IE.

Jan 16th, 2009, 04:31 AM
You nailed it, VIP. I was actually coming back here to post that I found the solution which is related to the infamous "peekaboo" bug. This was pointed out to me elsewhere, and although I had heard of it, I'd never encountered it.

There are numerous suggested fixes, but applying the following styles to the disappearing elements worked for me:

position: relative; /* peekaboo bug fix for IE6 */
min-width: 0; /* peekaboo bug fix for IE7 */