Another IE z-index issue

[BeeDev]

Hello,

 

I have a new problem with Internet Explorer 6 z-index, and was hoping someone here might be able to help me.

 

I've gone through most of the fixes suggested on Google, but to no avail.

 

The offending page is here:

http:/ /www.andrewwilliams.tv/draft/pages/books/to-kill-a-tsar/map.asp

 

It's a custom made map with markers that have onmouseover tooltips.

 

The markers are placed within div#map(position:relative), using div.pointer(position:absolute).

div.pointer has block style <a> tags inside which contain the marker images. These anchors are not positioned absolutely.

div.pointer also contains the relative tooltip, div.tooltip, which is just hidden via CSS, and shown via Plugin for jquery.

 

Now everything is as intended on Firefox, but with Internet Explorer 6 - if you Hover over marker 6 then you can see marker 8 popping out through the tooltip of marker 6.

 

I'm more than happy to change how the plugin works, if anyone suggests a fix to resolve this z-index bug.

I can change the order of the pointers in the HTML structure, but that won't really fix it as the tooltips are dynamically positioned depending on the user's screen size & viewport position (scroll).

 

The tooltip plugin I'm using is: http:/ /flowplayer.org/tools/tooltip/index.html

The jQuery version 1.3.2

The page has been checked for HTML & CSS errors, XHTML Transitional passed, & CSS check with 1 error (lightbox.css has an IE6 hasLayout hack that W3C is complaining about)

[PicnicTutorials]

Did you try adding zindex to .pointer or .tooltip? What's the plugin feeding them?

[BeeDev]

Yea I have tried setting z-index for those two, and I have tried setting z-index to various other stuff but it's not working/helping.

 

The plugin only modifies div.tooltip & sets its style to:

visibility: visible; position: absolute; top: -251px; left: 35px; display: block; opacity: 0;

 

 

The minus positions have something to do with the positioning of the tooltip from the relative positioned parent, instead of the viewport... not sure exactly, but had to configure the plugin in a certain way to achieve the effect of the tooltip appearing just above the mouse pointer. Before the config it was putting correct left top coordinates but it was from the view port, so all the tooltips were flowing out of the screen & creating scrollbars at the bottom of the browser. This is not a hack though, it's a simple configuration while calling the script

Edited June 4, 2010 by BeeDev

[PicnicTutorials]

HI,

 

I'll play with it for you if you set up a test page. Remove all the dreamweaver editable regions and provide full path links to all the scripts and css so I can setup a local copy. As is I can't even touch the code because of that stuff.

[PicnicTutorials]

no worries I got a local working copy. Although I still have not been able to crack it. Most likely it's because the tooltip is in the same container as the trigger. But you need it that way to function correctly. I'll play with it some more later.

[BeeDev]

Thanks Eric,

 

I'll try and see if I can make it work differently.

[BeeDev]

Hi Eric,

 

I have managed to fix this.

 

Most likely it's because the tooltip is in the same container as the trigger

 

This sentence gave me the solution basically, I took all the tooltips & triggers out of the div.pointer containers so all the triggers & tooltips were on same level and within a same parent - div#map. That fixed the issue beautifully.

 

Thanks for your help.

 

B.

Edited June 7, 2010 by BeeDev

[PicnicTutorials]

Good! I tried everything I could think of with the other setup and could not find a fix for it.