I have a table with a row toggle. The row that i toggle has tablecells in it with colspans I display and hide a row. When clicking on a link I swap the class of the row from .show {display:block} to .hide{display:none}. In IE it works OK but when I display the hidden row in safari and Firefox the whole row that I display again has the width of the first cell of the row above and the space between the hidden row and the row above grows.

Why is this? and how can I prevent firefox and safari from growing the space between two rows , does anybody have seen this before?

A short snippet of two rows:
                <tr>
<td><a href="#" class="collapsIcon" id="toggle1" onclick="togglers.toggleCollapse(this,'result1');return false;">+</ a></td>
                        <td><a 
href="uc18_claim_record_overview.html">Overview</a></td>
                        <td>Lloyds</td>
                        <td>Spanish Delight</td>
                        <td>SPA 05 0549</td>
                        <td>15453434534</td>
                        <td class="numeric">17.543,12</td>
                        <td>descript</td>
                        <td>20 jul 2005</td>
                </tr>
                <tr id="result1" class="hide">
                        <td>&nbsp;</td>
                        <td colspan="8">
                                <div class="containerOutline">
                                        <table summary="">
                                                <caption>
                                                My special caption
                                                </caption>
                                                <thead>
                                                        <tr>
                                                                <th class="sort" 
scope="col">Columnlabel1</th>
                                                                <th class="sort" 
scope="col">Columnlabel2</th>
                                                                <th class="sortDown" 
scope="col">Columnlabel3</th>
                                                                <th class="sort" 
scope="col">Columnlabel4</th>
                                                                <th class="sort last" 
scope="col">Columnlabel5</th>
                                                        </tr>
                                                </thead>
                                                <tbody>
                                                        <tr class="odd">
                                                                <td>KL 6895</td>
                                                                <td>DFR-GT</td>
                                                                <td>04 feb 
2005</td>
                                                                <td 
class="numeric">1.750,00</td>
                                                                <td>ABCDF</td>
                                                        </tr>
                                                </tbody>
                                        </table>
                                </div>
                        </td>
                </tr>


*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************

Reply via email to