Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Dec 2004
    Location
    Jamaica
    Posts
    592
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Popup menu problem

    Code:
                <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:
    Code:
             <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!
    Last edited by jaywhy13; 07-06-2005 at 07:21 AM.
    I'm gonna find a way to download the internet if its the last thing I do...
    Prepare to bow down to me (or my grave) and call me almighty when the algorithm is finished

  • #2
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Dec 2004
    Location
    Jamaica
    Posts
    592
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jscheuer1
    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
    I'm gonna find a way to download the internet if its the last thing I do...
    Prepare to bow down to me (or my grave) and call me almighty when the algorithm is finished

  • #4
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Worked here:
    Code:
    <div style="position:absolute; background:white; z-index:90;" id="menuA" class="popup">
    FF and IE6 tested and approved.

  • #5
    Regular Coder
    Join Date
    Dec 2004
    Location
    Jamaica
    Posts
    592
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jscheuer1
    Worked here:
    Code:
    <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.

    Code:
        <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>
    I'm gonna find a way to download the internet if its the last thing I do...
    Prepare to bow down to me (or my grave) and call me almighty when the algorithm is finished

  • #6
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Worked here in the table, I'm outta here . . .

  • #7
    Regular Coder
    Join Date
    Dec 2004
    Location
    Jamaica
    Posts
    592
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jscheuer1
    Worked here in the table, I'm outta here . . .
    Are you sayin that this worked?
    Code:
       <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>
    I'm gonna find a way to download the internet if its the last thing I do...
    Prepare to bow down to me (or my grave) and call me almighty when the algorithm is finished

  • #8
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Only 'cause you asked so nicely, double checked and still works,
    Code:
    <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>

  • #9
    Regular Coder
    Join Date
    Dec 2004
    Location
    Jamaica
    Posts
    592
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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
    I'm gonna find a way to download the internet if its the last thing I do...
    Prepare to bow down to me (or my grave) and call me almighty when the algorithm is finished

  • #10
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For even more fun:

    Code:
    <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>

  • #11
    Regular Coder
    Join Date
    Dec 2004
    Location
    Jamaica
    Posts
    592
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jscheuer1
    For even more fun:

    Code:
    <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.
    I'm gonna find a way to download the internet if its the last thing I do...
    Prepare to bow down to me (or my grave) and call me almighty when the algorithm is finished


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •