Closed Bug 298328 Opened 20 years ago Closed 19 years ago

If I show hidden table ( style="display:none" width="100%" ) by onClick="toggle('table_id')" it becomes minimum width

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
major

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: denon, Unassigned)

References

(
URL
)

Details

(Whiteboard: [sg:nse])

Attachments

(1 file)

Appending row results in incorrectly aligned columns
804 bytes, text/html
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4

I really like the Firefox, but we have a big problem with toggle script.
If table we show/hide has 100% width and more than one TD, after showing the
table width looks not fixed.

Toggle script looks this way:

<script type="text/javascript">
   function toggle(id)
    {var ide = document.getElementById(id);
     ide.style.display = ide.style.display == "none" ? "block" : "none";
    }
</script>

Reproducible: Always

Steps to Reproduce:
1. Create following html code:
   <html>
   <head>
   <script type="text/javascript">
      function toggle(id)
       {var ide = document.getElementById(id);
        ide.style.display = ide.style.display == "none" ? "block" : "none";}
   </script>
   </head>
   <body>
   <p><a href="javascript:void(0)" onClick="toggle('table')">LINK</a></p>
   <table width="100%"  border="0" cellpadding="0" cellspacing="6"    
      bgcolor="#FF0000" id="table">
      <tr bgcolor="#FFFFFF">
         <td>sdfsdf asd </td>
         <td>asdfsad</td>
         <td>saas</td>
      </tr>
   </table>
   </body>
   </html>
2. Check out the page in Firefox. Click on the link (the table will vanish),
click on the link again (the table will appear).
Actual Results:  
The table is 100%, but TDs has minimal width. Loooong red table with 3 small
left-aligned TDs ((

Expected Results:  
The table has width=100%, TDs are extended all along the table.
By default, tables are 'display:table', not 'display:block'.  Making a table be
'display:block' is a pretty major change.  (WinIE doesn't actually support any
values of 'display' other than 'none' for HTML table elements.)
Not a security exploit, clearing "sensitive" flag
Group: security
Whiteboard: [sg:nse]
When using the display:none to hide/show <table> or <tr> elements, do not use 
display:inline to restore the view. Instead, use display:table or 
display:table-row for the elements to render correctly.
If you are going for cross-browser compatibility, it seems that you have to be 
specific to IE since they don't recognize anything but none / block for table 
rows.

If I'm wrong on that, correct me, but so far a script I'm writing basically 
checks what type of browser is being used and if it's IE, it uses block and if 
it's anything else (read as a browser with standards) you use table-row.
The same problem occurs too, if you're using 'display:table-row'.
In our case we use such a toggling-function to hide/show form-fields which additional to our common-form.
If a cell for example just contains a selectbox, the cell-width is minimized if the hidden fields are toggled to 'table-row'. That causes, that the selectbox isn't displayed properly - this cells content floats over the cells borders into the bordering tablecells.
Then, having changed the select box's value the td-widths are recalculatet correctly.
This happens only, if the select box's content is wider than the usual td-width of this td.
Comment on attachment 202975 [details]
Appending row results in incorrectly aligned columns

This has been tested using Firefox1.5 RC 2.
comment 0, comment 3, comment 4, comment 6 : if you want to toggle display of tables and their parts cross-browser, toggle it between "none" and "", since "" will set it back to the default.

comment 5: if you aren't toggling to display: block it's not this bug. Please file a new bug in the product "Core" component "Layout" where it will be seen by the correct people to triage layout/CSS bugs, and then attach a minimized testcase with the "Create a New Attachment" link in that new bug report.
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: