如何使这些功能<a>适用于Firefox，而不仅仅是Internet Explorer 6</a>

Question

This code only works for Internet Explorer 6, I don't know how to make it work for Firefox. I'm using hyperlinks that contain table rows to change the content on the page. However, on firefox the links become unclickable...

Here is the CSS:

#sidebar         {display:block; top:116px; left:11px; width:150px; position:fixed;}   

.sidebarLink     a:hover td { cursor:pointer; background-color:#f60;
                 color:#fff; border: 1px solid #f60;;}
.sidebarLink     td{background-color:#fff; color:#f60; border: 1px solid #ccc;;}
.sidebarLink     {font-family: sans-serif; font-weight: bold; font-size: small;} 

And the HTML:

<div id="sidebar">      
    <table style="table-layout: fixed; word-wrap: break-word border-collapse: collapse;" class="sidebarLink" cellpadding="5" cellspacing="4" width="150">
        <a href="index.php?test=table1"> 
            <tr align="middle">
                 <td>Link 1</td>
            </tr>
         </a>
         <a href="index.php?test=table2">
             <tr width="90" align="middle">
                 <td>Link 2</td>
             </tr>
         </a>
   </table>
</div>

I could turn this into a form with buttons and style the buttons to look like I have the table right now. The problem is that causes a performance issue with the table itself and the onHover feature so it would be great if someone knows a way to make this function in firefox.

Answer 1

That's completely bogus HTML and I'm amazed it even works in IE6. You can't just put arbitrary elements between a table and its cells.

It doesn't look like you should need a table for this at all? Just have the two links (maybe in a list) and give them display: inline-block; and width: 75px ;.

Incidentally, there are more browsers than Firefox and IE6 nowadays, and IE6 has got to be wayyy at the bottom of the popularity ladder by now. Even Google largely gave up on it years ago.

Answer 2

Why not do:

<div id="sidebar">      
    <table style="table-layout: fixed; word-wrap: break-word border-collapse: collapse;" class="sidebarLink" cellpadding="5" cellspacing="4" width="150">

            <tr align="middle">
                 <td><a href="index.php?test=table1"> Link 1</a></td>
            </tr>


             <tr width="90" align="middle">
                 <td><a href="index.php?test=table2">Link 2</a></td>
             </tr>

   </table>
</div>