Hi Guys,

 

Need a little help!

 

Basically I have a CSS drop down menu which displays fine when rolled over in FF but in IE the drop down appears behind the JPEG image.

 

The Z-Index is set to 500 on the drop down and there is no Z-Index value set on the div holding the jpeg.

 

Im guessing it is a Z-Index issue but I dont have any experience in using it so if someone can help me out id be very greatful.

 

God Speed!

would need to see an example of what you have going on to help you. its most likely not a z-index issue

Heres the CSS

 

#Div2

{

position: absolute;

left:6px;

bottom:370px;

background: transparent;

}

 

#menu

{

position:absolute;

left: 7px;

bottom: 570px;

}

.preload1 {background: url(blank_over.gif);}

.preload2 {background: urlblank_overa.gif);}

 

.menu2

{

padding:0 0 0px 100px;

margin :0;

list-style:none;

height:28px;

width: 685px;

background:#3886BD;

z-index:500;

position:absolute;

font-family:arial, verdana, sans-serif;

}

.menu2 li.top

{

display:block;

float:left;}

.menu2 li a.top_link

{

display:block;

float:left;

height:36px;

line-height:27px;

color:#ccc;

text-decoration:none;

font-size:11px;

font-weight:bold;

padding:0 0 0 12px;

cursor:pointer;

background: url(blank.gif);

}

.menu2 li a.top_link span

{

float:left;

display:block;

padding:0 24px 0 12px;

height:36px;

background:url(blank.gif) right top;}

.menu2 li a.top_link span.down

{

float:left;

display:block;

padding:0 24px 0 12px;

height:36px;

background:url(blanka.gif) no-repeat right top;}

.menu2 li a.top_link:hover

{

color:#fff;

background: url(blank_over.gif) no-repeat;}

.menu2 li a.top_link:hover span

{

background:url(blank_over.gif) no-repeat right top;}

.menu2 li a.top_link:hover span.down

{

background:url(blank_overa.gif) no-repeat right top;}

 

.menu2 li:hover > a.top_link

{

color:#fff;

background: url(blank_over.gif) no-repeat;}

.menu2 li:hover > a.top_link span

{

background:url(drop3/blank_over.gif) no-repeat right top;}

.menu2 li:hover > a.top_link span.down

{

background:url(blank_overa.gif) no-repeat right top;}

 

 

.menu2 table

{

border-collapse:collapse;

width:0;

height:0;

position:absolute;

top:0;

left:0;}

 

 

.menu2 a:hover

{

visibility:visible;

position:relative;

z-index:200;}

.menu2 li:hover

{

position:relative;

z-index:200;}

 

 

.menu2 ul,

.menu2 :hover ul ul,

.menu2 :hover ul :hover ul ul,

.menu2 :hover ul :hover ul :hover ul ul,

.menu2 :hover ul :hover ul :hover ul :hover ul ul

{

position:absolute;

left:-9999px;

top:-9999px;

width:0;

height:0;

margin:0;

padding:0;

list-style:none;}

 

.menu2 :hover ul.sub

{

left:0;

top:31px;

background: #fff;

padding:3px;

border:1px solid #3a93d2;

white-space:nowrap;

width:90px;

height:auto;

z-index:300;}

.menu2 :hover ul.sub li

{

display:block;

height:20px;

position:relative;

float:left;

width:90px;

font-weight:normal;}

.menu2 :hover ul.sub li a

{

display:block;

font-size:11px;

height:20px;

width:90px;

line-height:20px;

text-indent:5px;

color:#000;

text-decoration:none;}

.menu2 :hover ul.sub li a.fly

{

background:#fff url(drop3/arrow.gif) 80px 7px no-repeat;}

.menu2 :hover ul.sub li a:hover

{

background:#3a93d2;

color:#fff;}

.menu2 :hover ul.sub li a.fly:hover

{

background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat;

color:#fff;}

.menu2 :hover ul li:hover > a.fly

{

background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat;

color:#fff;}

 

.menu2 :hover ul :hover ul,

.menu2 :hover ul :hover ul :hover ul,

.menu2 :hover ul :hover ul :hover ul :hover ul,

.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul

{left:90px;

top:-4px;

background: #fff;

padding:3px;

border:1px solid #3a93d2;

white-space:nowrap;

width:90px;

z-index:400;

height:auto;}

 

And heres the xhtml

 

<div id="Div2"><img src="bannernew1.jpg" alt="" width="786" height="150"/></div>

Plz check the following link it may help and simply your prob.

 

http://p.sohei.org/jquery-plugins/clickmenu/

 

For this you need JQuery and your job will be so easy! What I think

 

Br

Cksonline

Thanks mate, Javascript is a last resort.

 

Id rather stick with CSS, ive never used javascript before. I had this problem before but it was a flash image and i changed the wmode to transparent but cant get my head around this one.

 

Help dudes!

Thanks mate, Javascript is a last resort.

 

Id rather stick with CSS, ive never used javascript before. I had this problem before but it was a flash image and i changed the wmode to transparent but cant get my head around this one.

 

Help dudes!

 

When I change the position of the image div to inherit or fixed then the dropdown appears over the image but i cant control the position of the div, not sure if this helps just thought id add it in.

at work right now so i wont be able to really give it a good look till later. but if that last thing you say is try, why don't you try

 

position:relative;

left: Xpx;

top:Xpx;

 

and adjust them that way. have you tried relative position with this yet?

Yep its not working either mate...

 

Been trying to solve this issue all day and still no luck

Sorry i meant Relatives not working either.

I think i may have to go with javascript as the deadline is coming up, any last ditch efforts?

It could well be a z-index problem as IE calculates z-index incorrectly.

Have a look here for a good explanation.