Text in one column appears when mousing over link in another column

[kjmatthews]

I am designing a site but only have access to a Mac, equipped with
Virtual PC. On IE6 is appears that, on some pages of this site, the
navigation does not appear. I have put up a test case:
http://digitalovertone.com/examples/iedisappear.html. I have stripped
most of the irrelevant CSS from this page.

Please observe: on loading the page, the navigation and the words "some
text" should appear in the left column. They do not (at least on my
VPC). Now mouse over the link in the right-hand colum that reads "ipsum
dolor" or "ipsum" is the center column. The left-hand column appears.
Now head to http://digitalovertone.com/examples/iedisappear2.html,
where the navigation appears the first time I load the page in a new
browser window, and then whenever it feels like it on subsequent
reloads. Sometimes I have to mouse over that link; sometimes I don't.
It would have taken me hours to strip down the styles in test case 2,
so I left them all. Still, all the styles I stripped out of test-case 1
should NOT make any difference.

http://digitalovertone.com/examples/iedisappear3.html is a third test
case in which the navigation always appears, regardless of how many
times you reload the page. The only difference between iedisappear2
and iedisappear3 is that I have included full paths to the style sheets
instead of copying them inline and changed the content of the center
column. Changing the content back OR copying the style sheets inline
again results in disappearing navigation.

My two questions are: 1) Huh? and 2) do you know how to fix it? My IE6
bug-fixes are really rusty. I tried searching around but didn't find
anything useful. Any help would be sepctacular at this point.

To clarify: on the site I am developing the problem-page is best
simulated by test case 1. I made test case 2 as a comparison and noted
to my chagrin that it suffered from the same problem.

[kchayka]

kj********@gmai l.com wrote:

http://digitalovertone.com/examples/iedisappear.html.

[IE6]
Now mouse over the link in the right-hand colum that reads "ipsum
dolor" or "ipsum" is the center column. The left-hand column appears.

I might be a variation of the guillotine bug. IE6 does bizarre things
with :hover and backgrounds. I used to have a page bookmarked that
showed all kinds of weirdness, but seem to have lost it.

Anyway, try looking around
<URL:http://www.positionise verything.net/explorer.html> and
<URL:http://www.quirksmode. org/bugreports/archives/explorer_window s/index.html>

The worst (and most bizarre) IE bugs are pretty well documented between
those two sites.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[kjmatthews]

> I might be a variation of the guillotine bug. IE6 does bizarre things

with :hover and backgrounds.

Thanks for the reply. I don't think it is a variation of the
guillotine as you suggest because removing the offending
background-image changes on a:hover (in fact, removing the a:hover
styles altogether) doesn't correct the problem. It does seem to
display some similar behavior to the guillotine bug, but is missing
some characteristics (like non-floated content). I though at first it
might be a variation on the peekaboo bug as well, but none of the fixes
I was able to find corrected anything.

Frankly, this whole problem is utterly bizarre. I am going to open up
the site under development and see if anyone can figure it out. The
test cases so far are:
1. (http://digitalovertone.com/examples/iedisappear.html) Navigation
never appears until you mouse over a link. Stripped down CSS and HTML.
2. (http://digitalovertone.com/examples/iedisappear2.html) Navigation
will appear in a brand new browser window, but will disappear on
reload. Full CSS but stripped down HTML.
3. (http://digitalovertone.com/examples/iedisappear3.html) Navigation
doesn't appear until you mouse over link. Full CSS inline but image
paths are wrong.
4. (http://digitalovertone.com/examples/iedisappear4.html) Same as 3.
but image paths are correct. Navigation appears 100% of the time.

The site itself is under development at
insula.digitalN OINDEXovertone. com. Please remove the capital letters
(I'd prefer this site not begin to appear on search engines, sorry for
the pain-in-the-ass URL).

1. The index page (http://insula.digitalNOINDEXovertone.com/) is,
essentially, test-case 4 but with externally linked stylesheets.
Navigation always appears. However, if you click on any of the
functional links (Publique, Contacto, or Nosotros) the navigation will
not appear.
2. "Publique" (http://insula.digitalNOINDEXovertone.com/publique.php)
is an example in which the center column is the longest on the page.
3. "Nosotros" (http://insula.digitalNOINDEXovertone.com/nosotros.php)
is exactly the same as "Publique" but with some nested lists (from the
index page) below the text that magically make the navigation appear.
Copying other elements from the index page does not produce the same
result.
4. In "Contacto"
(http://insula.digitalNOINDEXovertone.com/contacto.php) I have
reproduced the index page but without the nested lists that made the
navigation appear in "Nosotros". The navigation still appears.

I am COMPLETELY stumped by this. I can't seem to pin down any one bit
of HTML or CSS that makes the navigation appear or disappear 100% of
the time.

[kjmatthews]

A small update: adding an unordered list to the center column for some
reason forces the navigation to render appropriately. The absence of
an unordered list in the center column will make the navigation
disappear. I have no idea why that would happen. Anyone?

[kjmatthews]

Solved. I will post tomorrow on how, as it is actually pretty
interesting.

[kjmatthews]

Essentially, what this problem boiled down to was that (apparently) if
you apply a list-style-image to an unordered list, IE6 REQUIRES the
presence of an unordered list with a list-style-image SOMEWHERE in the
HTML to show any unordered lists at all. I could be wrong with my
conclusion here as my testing has been far from exhaustive, but
removing "list-style: none outside none" from the navigation ul and
letting the normal ul list-style-image be displayed made the navigation
display consistently, as did keeping "list-style: none outside none" in
the navigation and putting a ul in the html document somewhere else
(even with display: none). In the end I applied a 1px x 1px
transparent GIF to the navigation ul, and it seems to be happy enough
to display 100% of the time.

I haven't found any documentation on this anywhere.

The only thing I still can't figure out is why mousing over a link made
the navigation paint (in some test cases), but I seem to have bypassed
that issue altogether. Thanks to any who took a look with the
intention of helping. This was really weird.