33 users online (1 members and 32 guests)  


  Results 1 to 3 of 3

Related

  1. image rollover menu    Forum: HTML Forum
    Replies: 0
  2. Rollover problem    Forum: Javascript Forum
    Replies: 4
  3. Image to text menu rollover    Forum: CSS Forum
    Replies: 3
  4. Border for table cell rollover    Forum: CSS Forum
    Replies: 4
  1. #1
    Malty's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2004
    Posts
    2

    Table Menu Rollover problem

    I'm working on a menu in a table where the state of the table cells (border and background color) changes when the mouse is hovering over them, but for some reason, it is not working correctly in IE (there are no problem in Netscape and Opera).

    The problem is when the mouse hovers over the text in the cells, it works perfectly, but when the mouse is not over the text but still inside the cells, only the first menu entry works. The rest does nothing. Why?

    Here is a code example that illustrates the problem:

    Code:
    <html>
    
    <head>
      <title>Menu Test</title>
      <style>
        <!--
          table#menu_1 td {
            padding: 0px 0px 0px 0px;
            font-size: 13px;
          }
    
          table#menu_1 td a {
            display: block;
            color: #000000;
            padding: 1px 3px 1px 3px;
            border: 1px solid #FFFFFF;
            text-decoration: none;
          }
    
          table#menu_1 td a:hover {
            color: #FFFFFF;
            border: 1px solid #000000;
            background-color: #0099DD;
          }
        -->
      </style>
    </head>
    
    <body>
      <table id="menu_1" cellspacing="0" cellpadding="0" width="150px">
        <tr><td><a href="#">Menu Item 1</a></td></tr>
        <tr><td><a href="#">Menu Item 2</a></td></tr>
        <tr><td><a href="#">Menu Item 3</a></td></tr>
        <tr><td><a href="#">Menu Item 4</a></td></tr>
        <tr><td><a href="#">Menu Item 5</a></td></tr>
      </table>
    </body>
    </html>

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Have you tried adding

    Code:
    width: 150px;
    to

    Code:
      table#menu_1 td a {
            display: block;
            color: #000000;
            padding: 1px 3px 1px 3px;
            border: 1px solid #FFFFFF;
            text-decoration: none;
          }
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    Malty's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2004
    Posts
    2
    ARGH! Was that really all? Man! LOL!

    Thanks. It works.



Tags for this Thread