...

View Full Version : Popup menu problem



jaywhy13
07-06-2005, 06:18 AM
<table><tr><td>

<div style="position:relative;">
<div style="position:relative;" onmouseOver="menuA.style.visibility='visible'">C-Link</div>
<div style="position:absolute; z-index:90;" id="menuA" class="popup">
<div style="width:70px;">
Item One
</div>
<div style="width:70px;">
Item Two
</div>
</div>
</div>
</td></tr>
<tr><td>hello!!!</td></tr>
</table>

This is the code for a popup menubar. However... when its outside of a table. It works perfectly... inside a table... like in the code, the contents of the following td are displayed OVER the menubar. Any suggestions on the correction of that?

ThIs works:


<div style="position:relative;">
<div style="position:relative;" onmouseOver="menuA.style.visibility='visible'">C-Link</div>
<div style="position:absolute; z-index:90;" id="menuA" class="popup">
<div style="width:70px;">
Item One
</div>
<div style="width:70px;">
Item Two
</div>
</div>
</div>
hello there!

jscheuer1
07-06-2005, 08:57 AM
Actually, it is displaying over the other table data thinger there. You can see the other td because your pop up division has no background. Give it a background color or a background image and color and it will cover that pesky td.

jaywhy13
07-06-2005, 02:22 PM
Actually, it is displaying over the other table data thinger there. You can see the other td because your pop up division has no background. Give it a background color or a background image and color and it will cover that pesky td.

Nope... I already tried applying background colors. That doesn't work. And neither does z-index

jscheuer1
07-06-2005, 06:04 PM
Worked here:

<div style="position:absolute; background:white; z-index:90;" id="menuA" class="popup">FF and IE6 tested and approved.

jaywhy13
07-06-2005, 06:13 PM
Worked here:

<div style="position:absolute; background:white; z-index:90;" id="menuA" class="popup">FF and IE6 tested and approved.


When its just divs it works... but when its in a table and has data that follows thats where the problem arises.... adjust this code that follows... thats the one I'm having trouble with.


<table><tr><td>

<div style="position:relative;">
<div style="position:relative;" onmouseOver="menuA.style.visibility='visible'">C-Link</div>
<div style="position:absolute; z-index:90;" id="menuA" class="popup">
<div style="width:70px;">
Item One
</div>
<div style="width:70px;">
Item Two
</div>
</div>
</div>
</td></tr>
<tr><td>hello!!!</td></tr>
</table>

jscheuer1
07-06-2005, 06:26 PM
Worked here in the table, I'm outta here . . .

jaywhy13
07-06-2005, 06:29 PM
Worked here in the table, I'm outta here . . .
Are you sayin that this worked?

<table><tr><td>

<div style="position:relative;">
<div style="position:relative;" onmouseOver="menuA.style.visibility='visible'">C-Link</div>
<div style="position:absolute; z-index:90;" id="menuA" class="popup">
<div style="width:70px;">
Item One
</div>
<div style="width:70px;">
Item Two
</div>
</div>
</div>
</td></tr>
<tr><td>hello!!!</td></tr>
</table>

jscheuer1
07-06-2005, 06:39 PM
Only 'cause you asked so nicely, double checked and still works,

<table><tr><td>

<div style="position:relative;">
<div style="position:relative;" onmouseOver="menuA.style.visibility='visible'">C-Link</div>
<div style="position:absolute; background:white; z-index:90;" id="menuA" class="popup">
<div style="width:70px;">
Item One
</div>
<div style="width:70px;">
Item Two
</div>
</div>
</div>
</td></tr>
<tr><td>hello!!!</td></tr>
</table>

jaywhy13
07-06-2005, 06:48 PM
Could you please.... upload a screenshot of that in action. Because I just copied and pasted and it didn't work. I'm asking really nice again :thumbsup:

jscheuer1
07-06-2005, 06:48 PM
For even more fun:


<table><tr><td>

<div style="position:relative;">
<div style="position:relative;" onmouseout="menuA.style.visibility='hidden'" onmouseOver="menuA.style.visibility='visible'">C-Link</div>
<div style="position:absolute; background:white;visibility:hidden; z-index:90;" id="menuA" class="popup" onmouseover="this.style.visibility='visible'" onmouseout="this.style.visibility='hidden'">
<div style="width:70px;">
Item One
</div>
<div style="width:70px;">
Item Two
</div>
</div>
</div>
</td></tr>
<tr><td>hello!!!</td></tr>
</table>

jaywhy13
07-06-2005, 10:14 PM
For even more fun:


<table><tr><td>

<div style="position:relative;">
<div style="position:relative;" onmouseout="menuA.style.visibility='hidden'" onmouseOver="menuA.style.visibility='visible'">C-Link</div>
<div style="position:absolute; background:white;visibility:hidden; z-index:90;" id="menuA" class="popup" onmouseover="this.style.visibility='visible'" onmouseout="this.style.visibility='hidden'">
<div style="width:70px;">
Item One
</div>
<div style="width:70px;">
Item Two
</div>
</div>
</div>
</td></tr>
<tr><td>hello!!!</td></tr>
</table>


I had to copy it into a totally new document and it worked. Mayb i had some style preventing from before.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum