interesting problem Absolute positioning of divs z-index

[petergus]

Problem overcap:
on this website there is a DHTML dropdown menu (ul style), and right below some of the menu is a flash video, and the issue is getting the dropdowns to show and STAY over the flash. I used WMODE and that works fine in most browsers (except IE for mac), so tried making a dive around the flash and z-indexing it and this also works but only when positioned ABSOLUTE! however, when i wrapped it with a relative div to keep it in place, but then z-index doesnt work with relative on IE5.2.
so i need some idea to somehow make this wrapper absolute positioned but then something to hold it in place without overriding it.
here the css

 
 
#flashdivcontain
{
width:400px;
height:200;
top:10px;
left:10px;
position:relative;
}
 
#flashcontain {
    border: 0px solid #333;
    width: 200px;
    height:200;
    position: absolute !important;
    top: 45px;
    left: 50px;
    z-index: 2 !important; 
 
}

[astangeland]

For starters #flashdivcontain needs to have a lower z-index too, it doesn't make any sense or just the child to have a reduced z-index, since moving a child's z-index never matters.

However since its a bug and not a real css problem, that probably won't fix anything. If you would like another idea of how to position the flash using absolute besides what you already tried, I would need to see the site and the html. Or else I guess I misunderstood your question.

[petergus]

yes, it seems the z-index command will not work for relative in IE ....so i cant use it :( so basically im looking for some way to anchor the absolute div.
page is [HTML]http://www.gustavson.com/new/index4.htm[/HTML]
thanks!!

[petergus]

still have the same problem....anybody have aannyyy idea??
thanks!!!

[garrow]

Personally I wouldn't spend that much time supporting IE mac, its market share is so low,and the browser so old that frankly its not worth it.

We generally build to only support IE6, IE7, FF 1.5+, Opera 7+ & Safari
IE6 support is also graded, so if feature is not supported we simply enhance for better browsers and support basic functionality and ignore the inevitable ugly-ness in ie6.

In this case I would recommend targeting ie5mac with either conditional comments or stylesheet hacks :( and simply hide content it cannot display, or replace with an image.

[petergus]

Unfortunately i HAVE to make it work for a picky client :(

any advise on css hacks?? i think having something to recognize old IE and show another style sheet would be ideal but is out of my leugue and i have no idea where to start....so any more info would most helpfull and appreciated!!
thanks!

[garrow]

I would just tell the client that the browser is 8 years old and get over it personally, If its good enough for yahoo (to not support it) its good enough for the rest of the world too.

googling "target ie5mac" gave me this stylesheet hack

<style type="text/css">
\/*
@import("stylesheet.css");
*/
</style>

http://www.webmasterworld.com/forum83/2627.htm

Which is ugly, but should suit your purpose.

Alternatively you can target specific versions of IE but not mac/win with IE conditional comments.
My personal favourite.
Here are all the permutations I use, ripped straight from the textmate HTML bundle.
[HTML]<!--[if IE 5.0]> IE Conditional Comment: Internet Explorer 5.0 only <![endif]-->[/HTML]

[HTML]<!--[if IE 5.5]> IE Conditional Comment: Internet Explorer 5.5 only <![endif]-->[/HTML]

[HTML]<!--[if lt IE 6]> IE Conditional Comment: Internet Explorer 5.x <![endif]-->[/HTML]

[HTML]<!--[if lte IE 6]> IE Conditional Comment: Internet Explorer 6 and below <![endif]-->[/HTML]

[HTML]<!--[if IE 6]> IE Conditional Comment: Internet Explorer 6 only <![endif]-->[/HTML]

[HTML]<!--[if gte IE 7]> IE Conditional Comment: Internet Explorer 7 and above <![endif]-->[/HTML]

[HTML]<!--[if IE]> IE Conditional Comment: Internet Explorer <![endif]--> [/HTML]

[HTML]<!--[if !IE]><!--> IE Conditional Comment: NOT Internet Explorer <!-- <![endif]-->[/HTML]