Hi guys,

 

this site which I have lovingly crafted for my friend is fine on most normal browsers... BUT if you view it in IE, the toggle button on 'portfolio' doesn't display properly. By that I mean that the menu ends up BELOW the slideshow... now I need to set the menu to the highest possible z-index but it wont work in IE... so WHY??? lol

 

Please help this poor ol' web designer

Hi,

Looks fine in my IE8.

Cheers Lev, any idea why this would happen in IE7 and below?

 

Cheers mate

Is there any Flash in this? Because this has always been a problem with Flash banners interacting with HTML elements - it has some sort of z-index Godmode on it.

 

http://kb2.adobe.com/cps/142/tn_14201.html - this would fix it.

 

If not, what is the name of the script you're using?

Dmnd IE...

For never was a story of more woe...

 

What if to try to say UL that

#dropdown ul
{
z-index:99;
}

 

When using z-index it helps to have a position to both divs.

 

ul#navigation
{             position: relative; z-index: 5;
margin-top:-15px;
background:#0304ff;
color:#FFFFFF;
height:50px;
line-height:50px;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
}


#banner
{          z-index: -1;
width:956px;
height:199px;
background:#FFFFFF;
border:2px solid #e5e5e5;
margin-bottom:20px;
margin-top:20px;
text-align:center;
line-height:206px;
position:relative;
}

Hi tery,

 

I had to work through this recently, basically what happens is that the flash player is positioned over the web page automatically as it a separate application to the browser (as far as I understand it).

 

You need to add a window mode parameter to tell it to sit in the doc flow, try adding

<param name="wmode" value="opaque" />

inside the embed tag.

 

more info here

Hi tery,

 

I had to work through this recently, basically what happens is that the flash player is positioned over the web page automatically as it a separate application to the browser (as far as I understand it).

 

You need to add a window mode parameter to tell it to sit in the doc flow, try adding

<param name="wmode" value="opaque" />

inside the embed tag.

 

more info here

 

 

For Flash I agree with you, but the banner images are a javascript slideshow.

Hey guys - thanks for the responses. Will try some of 'em out in a bit. There is no flash here at all guys, all done with jquery and css

For Flash I agree with you, but the banner images are a javascript slideshow.

 

Doh!

Woop woop - got it sorted!! FINALLY!!

 

Basically, if anyone is interested... I had to define a position and z-index for '#portfolio' and also a higher z-index for '#dropdown' which somehow made the stacking order work yay lol

Those divs are the child divs. I'm sure it would also work with the parent divs too. What's important is that the #banner with the javascript images has a lower z-index than any or all of the navigation divs.

Hi Wickham,

 

In theory, yes that would work, but this is how it was set up in the first place. The images in the banner had indexes of 4,5,6 etc... and the nav had indexes of 50+ - which is fine in a normal browser, but not in <=IE7

 

You need to specify a z-index for the container of the div in order to get it in the right place...