...

View Full Version : IE Z-Index Problem



mrjasonsweet
07-21-2008, 02:25 PM
Thanks for looking at this. Its driving me nuts. To summarize, check out this link:

Click here (http://www.sbwebhost.com/hojo/example.html)

The calendar div, despite having a z-index of 999, is positioned under the menu div that has a z-index of 10. Looks fine in FireFox but not IE. The menu div has a black border for emphasis.

Link to live page is here (validated W3C) (http://www.sbwebhost.com/hojo/castawaycove/index.php)

I feel like I'm stupid that I can't figure this out so your expert advice is appreciated.

BoldUlysses
07-21-2008, 03:37 PM
Try taking position:relative; off the menu:


#menu {
height: 23px;
padding-left: 155px;
padding-top: 29px;
background: url(../images/common/menu_bkg_bar.gif) no-repeat 200px 39px;
z-index: 10;
border: 2px solid #000000;
}

FYI, the z-index is not going to apply to your menu (http://www.w3schools.com/css/pr_pos_z-index.asp), since it's not absolutely positioned, but still in the document flow:


Note: Z-index only works on elements that have been positioned (eg position:absolute)!

If removing the position:relative; doesn't work, your last resort might be absolutely positioning the menu:


#menu {
position:absolute;
height: 23px;
left: 155px;
top: 29px; /* adjust pixel values accordingly */
background: url(../images/common/menu_bkg_bar.gif) no-repeat 200px 39px;
z-index: 10;
border: 2px solid #000000;
}

mrjasonsweet
07-21-2008, 04:32 PM
Hi Matt,

Thanks for giving this a look over. I tried both suggestions but no joy.

Now I'm in the process of commenting out each elements and seeing where things change. I did have a conflicting element which, after removing, has improved things a bit. Now the calendar just has a problem with the "subMenu" elements. So, at least I'm getting closer.

Thanks very much again.

macwiz
07-21-2008, 04:53 PM
Do you think you could remove that border? It is driving me crazy and does not fit it. There is really no purpose to it.

mrjasonsweet
07-21-2008, 05:12 PM
The menu div has a black border for emphasis.

I added the border only to troubleshoot the issue.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum