Child Overflow Above Parent

@tonyhApr 06.2004

Hey guys,

I’m using Vladdy’s multi-menu, and now that I’ve got it the way I need it I’ve run into a wall regarding implementation.

If JS is disabled I want the the menu to overlow: auto because the unordered list is in a contained div. I have a parent div (id=”navArea”) and a child div (id=”nav”) is placed within the parent. This works fine after it was tweaked to remove the horizontal scroll bar.

If JS is enabled it writes the new css file name in the header. Thus, Vladdy’s menu appears rather than an unordered list. However, rather than having the submenu’s overlap the parent div it’s clipped within the parent and scrolls horizontally, essentially making the menu inoperable. What *I believed* should have happened would be that the submenu’s would appear above the parent and content divs.

I’ve tried changing the navArea to overflow: hidden, but all this did was remove Vladdy’s multimenu system. I’ve tried applying a z-index (to both areaNav and nav), but it isn’t working, or I’m using it wrong.

This setup is fundemental in my design. The unordered list must be able to overflow: auto without JS and it must be able to overlap divs with JS enabled.

I really ~~[I]~~really[/I] need some help on this one, as I only have one week left to complete this design.

Edit: I’ve been able to get the submenu’s to appear outside of the parent with overflow: visible. I can even hover over them, but the <li> background color doesn’t not overlap the content div, nor can I actually hover over the <li> within the content div. Again the content is set up the same as the nav, parent div (id=”contentArea”) and a child div (id=”content”).

Edit: By adding z-index: 1 to areaNav, it works as I thought it should. But I still can’t hover into the contentArea to select the 2nd submenu.

Again, I REALLY need some help, as I thought I had this fixed, but I was wrong.

Edit: This is like the fifth edit or something stupid like that. Anyways, by applying a z-index: -1 to both contentArea and content works in IE6. However, in NS7.1 I loose all my content (I think it’s because body is still at default z-index) and I still can’t hover into the contentArea or content divs. So even if I did go and fix all the z-index to get everything to appear right, it won’t do a darn thing if I can’t select the second submenu, which is where nearly all the anchors are.

I don’t think I can emphasize enough that I need a solution to this problem. Thanx.

to post a comment

CSS

12 Comments(s) _↴

@VladdyApr 06.2004 — #No need to write different stylesheets.

For IE declare two classes one as is now, and another that will set overflow and all items visible.

By default give the #nav block the latter styling, if JS is available just change the class name:

<body onload="document.getElementById('nav').className = 'JSonMenu'" ...

@tonyhauthorApr 06.2004 — #Vladdy,

There is more CSS being changed when JS is enabled than just your menu, so I feel I need an additional sheet. But thanx anyways ? .

But that doesn't solve the real problem. The real problem is I can't access the submenu's outside the parent div in Gecko. I can access them by changing overflow and z-index with IE, but this doesn't work in NS. Here some visuals will help:

[URL=http://people.uleth.ca/~tony.hughes/CenterTest/xhtml10StrictCenter3.html]Center Test 3[/URL]

The parent nav (navArea) is green and the parent content (contentArea) is red. In IE6 (of course I don't know if this'll work in IE5+) I can hover over contentArea without any problems once I've adjusted the overflow and z-index. In NS7.1 The submenus appear above contentArea, but I can only hover over them until the left red border. Once I hit that border the submenu's disappear.

How do I access the submenu's when they overflow on top of other divs?

Edit: I found [B]a[/B] solution to my NS7.1 problem and the menu now works as intended in both browsers. Unfortunatly, the fix was setting contentArea's overflow: hidden, so now a new problem is created. I can no longer scroll the content div.

It's not that big of an issue for my design, as I was intending to replace auto scrolling with a JS custom scroll bar anyway. But, there SHOULD be a better fix for those that are not using JS. Any luck on your end?

@tonyhauthorApr 19.2004 — #[i]Originally posted by tonyh [/i]

[B]Edit: I found [B]a[/B] solution to my NS7.1 problem and the menu now works as intended in both browsers. Unfortunatly, the fix was setting contentArea's overflow: hidden, so now a new problem is created. I can no longer scroll the content div.

It's not that big of an issue for my design, as I was intending to replace auto scrolling with a JS custom scroll bar anyway. But, there SHOULD be a better fix for those that are not using JS. Any luck on your end? [/B][/QUOTE]
Vladdy,

I haven't seen you around, may be your sick of us, or just making some money for a change ? . But, I could really use your (or others) help.

Okay, I said that not being able to scroll the 'contentArea' wasn't a big issue. I was wrong. I need to be able to scroll this area without JavaScript. And the only way I know how is to remove the overflow:hidden. And that's the problem, I don't know how to and have Vladdy's menu still be accessible.

Here's the [URL=http://forums.webdeveloper.com/showthread.php?s=&threadid=32854]thread[/URL] discussing the prototype.

Again, any suggestions will be appreciated.

@VladdyApr 19.2004 — #I'm not really sure I follow what the problem is.

I would just get rid of this annoying scroll bar thingy and use default scroll bar instead. It may not look too pretty to [b]you[/b], but it allows [b]me[/b] to scroll with a speed I like and to the place I like.

I also noticed that you go to unstyled menu when JS is disabled not only in IE, but Moz as well... Not sure why...

@tonyhauthorApr 19.2004 — #[i]Originally posted by Vladdy [/i]

[B]I'm not really sure I follow what the problem is.

I would just get rid of this annoying scroll bar thingy and use default scroll bar instead.[/b][/quote]
This is [i]exactly[/i] what I want to do.

[b]I also noticed that you go to unstyled menu when JS is disabled not only in IE, but Moz as well... Not sure why... [/B][/QUOTE]
Two reasons: your menu will only cascade or multi-menu in IE if JavaScript is enabled. So, it's a matter of consistancy, the site should appear relatively the same with or without JS enabled. Two, and the real reason behind this thread, is because I can't get the submenu's to be accessible above the content without placing overflow:hidden on it in Netscape.

This has all been explained in my previous posts on this thread. I need to know what needs to be changed, whether or it be the div layout, nav or content in order to allow the content div to be auto scrolled with your menu.

Edit: When you said default, you meant auto scroll right? If not, how do you set 'default' scrollbars without overflow?

@VladdyApr 19.2004 — #Ok, I got.

Do you have a link to the version of the page that has this problem, I'm very curious to look at it.

@tonyhauthorApr 19.2004 — #[i]Originally posted by Vladdy [/i]

[B]Ok, I got.

Do you have a link to the version of the page that has this problem, I'm very curious to look at it. [/B][/QUOTE]
I already did :rolleyes: .

Oh, the heck with it, here's the link for the [url=http://people.uleth.ca/~tony.hughes/BGCmovie/xhtml/index.html]prototype[/url] in the thread linked above.

You can find all the code there. To see what I mean about Netscape remove overflow: hidden in #contentArea from [url=http://people.uleth.ca/~tony.hughes/BGCmovie/xhtml/jsEnabled.css]jsEnabled.css[/url].

@VladdyApr 19.2004 — #I can not recreate the problem. Nothing changes if I remove the overflow:hidden

On a general note: you want to make sure your HTML validates before you attempt to debug CSS problems. A missing closing tag can cause quite a few problems....

@tonyhauthorApr 19.2004 — #Okay, validation aside, as this was discussed in the prototype analysis thread, because I know it'll validate later. And I don't have time to change all 30+ pages by hand right now. (I haven't implemented PHP yet.)

I just removed overflow:hidden from my local test site and it does exactly what I said it does in NS7.1 and I just tested it in FF 0.8 same thing.

The menu will appear above the content, but you cannot select any of the links from the second submenu.

What did you do that it works?

@VladdyApr 20.2004 — #Ok I see the problem now... that is some weird stuff....

@tonyhauthorApr 20.2004 — #[i]Originally posted by Vladdy [/i]

[B]Ok I see the problem now... that is some weird stuff.... [/B][/QUOTE]
And here I was beginning to think I was the only one... and I think weird is an understatement.

Try removing all of this:

[CODE][SIZE=2]#scrollBar {
 display: block;
 }
 
 #contentArea {
 overflow: hidden;
 }
 
 #navArea {
 white-space: normal;
 overflow: visible;
 z-index: 1;
 }[/SIZE][/CODE]

From the 'jsEnabled.css' file and retest it in IE as well as Gecko. Like the thread title sys "Child Overflow Above Parent". I believe this is being caused by the embeded divs, if I can figure out how to auto scroll the #nav and #content without them being nested I think this problem will go away. Atleast, I hope it will, but how do I apply overflow: auto without nesting?

Unless, you know if this problem goes deeper than that? Or have come up with a simpler solution?

@tonyhauthorMay 02.2004 — #Well, I PMed Vladdy rather than bumping up the thread claiming I'd post a solution if found. It's found, sort of....

Vladdy gave me the solution by using a fixed div rather than an absolutely positioned one. For whatever reason the fixed div will allow overflow, where anyother won't in NS/Moz. I don't know why, but it's something the developers should look into.

Anyways this is the original CSS:

[size=2]#navArea {
 position: absolute;
 top: 13.5em;
 left: 3em;
 width: 12.5em;
 height: 16.5em;
 margin: 0;
 padding: 0;
 overflow: auto;
 white-space: nowrap;
 border: 0px solid #008000;
 z-index: 1;
 }
 
 #nav {
 position: relative;
 top: 0.2em;
 left: 0.2em;
 width: 10em;
 margin: 0;
 padding: 0;
 font-size: 75%;
 z-index: 2;
 }[/size]

And this is what I had to change it to with JavaScript:

[size=2]#navArea {
 overflow: visible;
 }
 
 #nav { 
 position: fixed ! important;
 position: absolute;
 font-size: 100%;
 top: 50% ! important;
 top: 0;
 left: 50% !important;
 left: 1.5em;
 color: #FFFFFF
 background: #000000;
 width: 10.5em;
 margin: -2.5em 0 0 -26em ! important;
 margin: 0 0 0 0;
 padding: 0;
 border: 0px solid #2020C0;
 }[/size]

If you didn't already know, JavaScript is necessary with Vladdy's menu because MS won't fully support CSS2, thus a proprietary 'behaviour' work around was used.

BTW, I know that the CSS can be simplified by removing repeated/unnecessary declarations, this was just copied from the current working file ?.

You'll also notice that the fixed hack had to be applied to the #nav rather than #navArea. I don't know why, but with fixed applied to #navArea it behaved *almost* as if it were a child and couldn't be positioned as easily. But #nav behaved as I thought it would, so I centered the #nav and applied negative margins to set it where it normally would have been.

Also, [i]I'm hoping that someone can tell me how to fix the "shimmering/bouncing/shifting" text when the menu is used in NS/Moz?[/i] This didn't occur with the absolutely positioned nav, only since applying fixed.

I'm just wondering how many browser updates it'll take before this hack no longer works. I'm hoping it'll work in NS6+ and early versions of Moz. As for Opera, I'm almost scared to know how my site will appear....

[b]Thanx again Vladdy ? .[/b]

Also in #CSS _↴

background color escaping div annoying floating issue Question about borders

Success!

Help @tonyh spread the word by sharing this article on Twitter...

Tweet This

Child Overflow Above Parent

12 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Child Overflow Above Parent

12 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #CSS _↴