menulist li's are showing up above a popup div

1) Mike521 Group: Members
Posts: 7 Joined: 17 Dec 2007 Location: IP: 24.187.--.--

Posted:

I have the following setup:

#leftcontent div -- this contains the menulist, and is floated to the left (it's a left nav column)
#rightcontent div -- contains website content
-- also contains an absolutely positioned div
-- this div extends beyond #rightcontent, and overlaps #leftcontent

on firefox, the absolutely positioned div overlaps properly. But on IE7, the menulist li elements show up on top of the div.

here's a link to our testing site, we're using html 4.01 strict:
http://dev.favorfavor.com/page/FF/PROD/winter-coffee-favors-8290
edit: to see the absolutely position div, click the image on the right that says "click to view all designs"

thanks in advance if anyone can cut through the clutter and figure out what I can do to solve this.. I've tried various z-index's and position: relative and overflow: visible combinations to no avail

2) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 203.109.--.--

Posted:

Hmm, this is tricky, normally you would want the menus to overlap #rightcontent. The easiest fix would be to move the absolutely positioned DIV in the right content area to the end of the document before </body> on that page and give it a high enough z-index so it overlies everything.

- Angus.

3) Mike521 Group: Members
Posts: 7 Joined: 17 Dec 2007 Location: IP: 24.187.--.--

Posted:

thanks Angus, I do want the submenus to overlap #rightcontent, but the regular menu doesn't have to overlap anything, it's already visible.

I wonder why IE7 has the problem and FF doesn't -- meaning which one of them is "correct"

I'll see if I can move that absolute div outside of #rightcontent, it may be possible

thanks again

4) Mike521 Group: Members
Posts: 7 Joined: 17 Dec 2007 Location: IP: 24.187.--.--

Posted:

not sure if it's helpful or if it was obvious -- but I found that if I go into listmenu_v.css, under the .menulist li section, and make it position: static, the absolute div will overlap the menu in IE7. the unfortunate problem this creates is that the submenus don't show up when moused over.

5) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 203.173.--.--

Posted:

position:static -- well, the standard menu CSS is designed to work with relative/absolute items, that's why it won't show :). I'd probably stick with the page rearrangement.

Z-indexes get a little complicated and it doesn't help that IE <=7 does them differently to the standards-compliant browsers!

- Angus.

6) Mike521 Group: Members
Posts: 7 Joined: 17 Dec 2007 Location: IP: 24.187.--.--

Posted:

thanks again : )

I ended up doing something easier but I consider a bit clunky -- I decided to just hide the #leftcontent div when the popup div needs to be visible. When the popup is closed, #leftcontent becomes unhidden

I think the best solution would have been to move the popup outside of both divs, but our system won't let me print it elsewhere, so this is the best I can do for now

menulist li's are showing up above a popup div

Post a Reply: