BeeDev Posted June 4, 2010 Report Share Posted June 4, 2010 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) Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted June 4, 2010 Report Share Posted June 4, 2010 Did you try adding zindex to .pointer or .tooltip? What's the plugin feeding them? Quote Link to comment Share on other sites More sharing options...
BeeDev Posted June 4, 2010 Author Report Share Posted June 4, 2010 (edited) 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 Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted June 4, 2010 Report Share Posted June 4, 2010 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted June 5, 2010 Report Share Posted June 5, 2010 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. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted June 7, 2010 Author Report Share Posted June 7, 2010 Thanks Eric, I'll try and see if I can make it work differently. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted June 7, 2010 Author Report Share Posted June 7, 2010 (edited) 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 Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted June 7, 2010 Report Share Posted June 7, 2010 Good! I tried everything I could think of with the other setup and could not find a fix for it. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.