overflow:auto does not work in ff 3.5.13

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
    <script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"></script>
    <style type="text/css">
    table 
    {
      border: solid 1px #e8eef4;
      border-collapse: collapse;
    }
    table td 
    {
      padding: 5px;   
      border: solid 1px #e8eef4;
    }
    table th
    {
      padding: 6px 5px;
      text-align: left;
      background-color: #e8eef4; 
      border: solid 1px #e8eef4;   
    }
    </style>
</head>
<body>
<table id="table1" style="table-layout: fixed; width: 30%"  >
    <thead>
        <tr>
            <th>PROPERTY</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="overflow:auto;"><span style="color: Red">jfdkaljfioejwafkljd;sakflj;ioewajfkld;jsfkl;djsakfljdsf</span></td>
        </tr>
    </tbody>
</table>
<input type="button" value="Resize" onclick="$('table').width($('table').width() - 30);"/>
</body>
</html>

In this html webpage, user hits button to narrow the table. In all browsers except ff, td cell will show scrollbar when it's narrow enough as expected. But in ff 3.5.13(or any version), scrollbar is not showing up.

Any idea, please?

EDIT: after more search on StackOverflow, it turns out ff does not support overflow:auto and overflow:scroll for table or td. ff only supports overflow:visible and overflow:hidden if set table-layout to fixed. So sad!

ansaurus

tags:

views:

answers:

overflow:auto does not work in ff 3.5.13

related questions