2 replies [Last post]
dotcomikaze
dotcomikaze's picture
Offline
newbie
Last seen: 16 years 3 days ago
Joined: 2003-07-24
Posts: 3
Points: 0

Morning All,

I consider myself pretty good with CSS but this one is kicking my butt...

I have a long table that exceeds the page height. On each line item is a pop-up menu that lists additional options for that line item. The issue is if you click a menu at the bottom of the page, it appears below the 'page-fold' (the viewable area of the window) so that you have to scroll to see it.

I have used the bottom: 1%; declaration and this keeps the menu in viewing area, but if you view it in Netscape (aaarrgghhhh...he said netscape), the menu always positions at the bottom of the page even if you click one of the top items.

What I am trying to get is some CSS that will position the pop up relative to the area clicked, which I am doing now, but which will also position itself up or down to stay in the viewing area without scrolling.

Thoughts or suggestions?

Thanks in advance!

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 6 years 10 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Choosing where a menu pops up with CSS

some code example or links to the problem would help others help you better......

http//melbourne.ug.php.net

dotcomikaze
dotcomikaze's picture
Offline
newbie
Last seen: 16 years 3 days ago
Joined: 2003-07-24
Posts: 3
Points: 0

Choosing where a menu pops up with CSS

d'oh... yeah I guess it would...

Here is the selector and declarations;

.popmenu {
border : 1px ridge;
right: 1%;
line-height: 1.1em;
margin: 0 75px 0 0;
padding : 0;
position:absolute;
visibility:hidden;
width : 300px;
z-index: 1;
}

I use the Dreamweaver show/hide layers to display and hide the menu. Also, the link that pops up the menu is in a table cell and used like this;

<TD align="center" style="position:relative; z-index:8;">
<div class="popmenu" id="nowWhat8">
<span class="popmenuBar">
<A onClick="MM_showHideLayers('nowWhat8','','hide')">NEXT STEPS Action Menu for Record 8<img class="popmenubutton" src="../../images/xbox.gif"></A></span>
<A onClick="MM_showHideLayers('nowWhat8','','hide')">View Sources</A>
...snipped numerous additional Anchor tags...
</div>
<span class="popper">
<A onClick="classChange('div','popmenu','visibility','hidden'); MM_showHideLayers('nowWhat8','','show');">Next Steps</A></span>
</TD>

It works fine in IE and NS except for what I mentioned in the original post.

Not sure if seeing the code will help or not but there ya go...

Thanks