[solved] mouseover effect on navbar Search cell?

[Marris]

I am trying to add a mouseover effect (background color change) to each <td> cell in the navbar.

What I have done is define a new css class vbmenu_control_mover which is identical to vbmenu_control except for a different background color. Then I change the <td> class if onmouseover is detected on the cell.

This method works fine for all cells in the navbar with standard links, but the <td> onmouseover background change fails on the Search and Quick Links cells. Presumably this is because they have their own mouseover handling.

Is there any way to have mouseover on the Search and Quicklinks effect the entire containing <td> cell, rather than just the 'Search' text itself?

The only progress I have made was to move the id="navbar_search" from the <td> tag to the <a> tag. This allows the <td> background change over the cell, but only until the mouse reaches the link text...then the button reverts to the original background.

PHP Code:

<td class="vbmenu_control" onmouseover="this.className='vbmenu_control_mover'" onmouseout="this.className='vbmenu_control'"><a id="navbar_search" href="$vboptions[bburl]/search.php?$session[sessionurl]" accesskey="4">$vbphrase[search]</a> <script type="text/javascript"> vbmenu_register("navbar_search",1); </script></td> 


The attached image shows the mouseover effect on the cell (darker background), then the lower image shows the problem when the cursor is over the link text. The <td> background formatting is lost and the backgound color only changes under the text.

[Marris]

Well, I couldn't get around the popup code overriding the table mouseover condition. I had to redo the menu with a css based rollover solution using a horizontal list and setting the list item tag <li id="navbar_search">.

In case anyone else runs into the same problem, here's the css I ended up with:

PHP Code:

    .navbar_list {
      font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
      padding: .2em 0 .2em 0;
      background-color: #738FBF;
    }
    .navbar_list ul {
    padding: 0;
    margin: 0;
    text-align: center;
    list-style-type: none;
    white-space: nowrap;
    display: inline;
    }
    .navbar_list li {
      color: #FFFFFF;
      background-color: #738FBF;
      font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
      display: inline;
      
    }
    .navbar_list a {
    padding: .2em 1.6em .2em 1.6em;
     text-decoration: none;
     color: #FFFFFF;
       background-color: #738FBF;
    }
    .navbar_list a:link, .navbar_list a:visited {
    color: #FFFFFF;
      background-color: #738FBF;
    }
    
    .navbar_list a:hover, .navbar_list a:active {
      color: #FFFFFF;
      background: #3E5C92;
    } 


The default <td></td> cells of the navbar are replaced with a <ul><li><li><li></ul> list within a div of the class defined above.

And the list entry for the search button:

PHP Code:

<li id="navbar_search"><a  href="$vboptions[bburl]/search.php?$session[sessionurl]" accesskey="4">$vbphrase[search]</a><script type="text/javascript"> vbmenu_register("navbar_search",1);</script> 


[Boofo]

No closing li tag?