CSS Overflow auto and visible issues in Moz/NS?

Dev Shed Forums Sponsor:

April 30th, 2004, 06:16 PM

avatarAlpha

Registered User

Join Date: Apr 2004

Posts: 3

Time spent in forums: < 1 sec
Reputation Power: 0

CSS Overflow auto and visible issues in Moz/NS?

Hey guys,

I built a site that uses a linked list as an multi-level menu. This menu works fine in Moz/Netscape, but I have to use IE behaviours (thus JavaScript) for it to work in IE. Because this is a list I've contained it in a div with overflow: auto. And set a new external css file using JavaScript to convert that list into the multi-level menu.

The problem is the menu's horizontal submenus appears within the parent div, rather than overflowing above the parent. I was able to fix this problem using a z-index and overflow: visible in IE. However, in Gecko based browsers the menu's submenu's links aren't accessible over the site content also contained in an overflow: auto div. But, as said works fine in IE.

Here is the site. To test this bizare functionality manipulate the #contentArea and #navArea properties in this css file.

You will notice that there is a DHTML custom scrollbar if JS is enabled, this is because the only way I could get the submenu's to be accessible above the content in Gecko is to make the div overflow: hidden.

Myself, and the developer of the orginal menu, have been working on this for weeks (well, more me) and haven't determined how to make the menu accessible while mantaining overflow: auto on the #contentArea div. Just today we had some limited success changing the #navArea position to fixed rather than absolute in Gecko. After some repositioning the menu was fully accessible at medium/100% text size. But, once the site was resized using font sizes (it uses a relative font size 'em' for an elastic layout) the fixed div wouldn't stay in position.

I'm hoping that someone here is able to tell me how to set overflow: visible to overflow above an overflow:auto div in NS/Moz (I'm using FF0.8) and still work in IE?

I'd greatly appreciate it because I want to replace the custom scrollbar with default scrollbars for accessibility. Thanx.

May 1st, 2004, 04:44 PM

avatarAlpha

Registered User

Join Date: Apr 2004

Posts: 3

Time spent in forums: < 1 sec
Reputation Power: 0

Since the menu worked with position fixed, is it at all possible to force a fixed div to align with a containing div parent rather than the viewport? Could it be possible with selectors?

Create a class that makes the container div emulate the body or/and html element?

I would just fix the menu based on the viewport top/left, except that the site is designed to be vertically centered using top 50% and negative top margins. In this case the menu would be 50% -margin +more top/left. And I don't believe it's possible to do math with CSS unless scripts are used.

May 2nd, 2004, 08:31 PM

avatarAlpha

Registered User

Join Date: Apr 2004

Posts: 3

Time spent in forums: < 1 sec
Reputation Power: 0

I was able to utlize the fixed position by placing the div as if it were an absolute in regards to the <body>.

But this still doesn't resolve the box model problem in NS/Moz. Because either absolute positioning should have worked or fixed positioning shouldn't have worked.

Viewing: Dev Shed Forums > Web Design > CSS Help > CSS Overflow auto and visible issues in Moz/NS?

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump