Re: [css-d] Tooltip hiding under a relatively positionned box (in IE)
Go sha wrote: ... Please let me know (and forgive me) if I break any of the lists' rules... Hello Sharon. It is more likely to get help when you offer an URL to a valid testcase. I have a list that displays information of certain items. ... I had to absolutely position elements within the list. This required to relatively position the list item. And for IE, you had to add a height to the li to allow for bottom-positioning. To save space, a tooltip was required from within the list. But (I think) because the other list item (boxes) below are relatively positionned, the tooltip shows up _under_ the subsequent items, only in IE! The problem in IE is, that any dimensioned element with a position:relative establishes a new stacking context. This is wrong, and it is still wrong in IE7. You can simulate this wrong behavior in the good browsers by adding a z-index:1 to the first relatively positioned list item and z-index:2 to the second. The stacking context is the basis for any stacking operation within this block. The tooltip pops up under the second block, because nothing inside this stacking context 1 will ever escape to render above block 2, no matter what z-index you apply to a positioned child. I do not see an elegant solution. I think you'll have to apply a higher z-index:2 to the first block and z-index:1 to the second, which should be no big problem for generated content. An alternative is to omit the position:relative and rethink the positioning inside the list entry. Or, you could dimension the tooltip as a rectangle in landscape format and position the tooltip with a more negative x-offset. li div class=list-item li class=list-item div class=headerh2#160;/h2/div h2 class=header ... and so forth. div class=song_inplaylist a href=# In playlist div It is not allowed to have a div inside a link. Use a span with display:block. a href=# class=song_inplaylistIn playlistspan /span/a You should validate your code. The web developer toolbar extension for Fx comfortably sends a page to the W3C validator. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tooltip hiding under a relatively positionned box (in IE)
Thank you for responding, Ingo! I apologize for not offering an URL to a testcase, our test site is not accessible from the outside and I didn't take the time to sign up for one of those free webpage sites... :-) I seriously thought about rethinking the positionning inside the LIs, but I'm unfortunately time-strapped and I really wanted to see if all this was possible... Not to mention, the graphic designer who designed this part would killed me hehehe The z-index option was also considered, but it didn't fix the initial problem, which also extented to a drag-and-drop AJAX effect. If I found an elegant solution to this one, I could've probably applied it to the next! So in the end, it seems that I will have to content myself with positionning the tooltip differently. I was really stumped on this one, but it looks like IE got the better of me... :-( Oh! And thank you for pointing out the Div in the link... The funny thing is that I seem to remember using a span, but I guess in my desperation, I changed it to a div to see if it'd work any better... Once again, thank you for responding! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
