Closed Bug 332171 Opened 18 years ago Closed 8 years ago

Input type=button rendered incorrectly in HTML table when CSS property of "width: 100%;" is specified

Categories

(Core :: Layout: Tables, defect)

Product:
Core
Component:
Layout: Tables
Platform:
x86
Windows 2000
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED FIXED
Milestone:
mozilla47
Tracking Flags:
Tracking Status
firefox45 --- affected
firefox46 --- fixed
firefox47 --- fixed

People

(Reporter: alan.garner, Unassigned)

References

Details

(Keywords: testcase)

Attachments

(2 files)

Testcase containing the code provided by the user
509 bytes, text/html
Details
Same code provided with the css commented out
518 bytes, text/html
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

When an HTML INPUT tag of type=button is coded within a table cell, and given the CSS property of "width: 100%", it renders incorrectly. Especially when the table cell has no width attribute and other table cells do have width. The button object is squeezed out.

Reproducible: Always

Steps to Reproduce:
1. Try the following code:

<html>
  <style>
.buttons {
	width: 100%;
}
  </style>
  <body>
    <table border=1 cellpadding=2 cellspacing=0 width=100%>
      <tr>
        <td width=100% align=left nowrap>This cell takes up most of the space</td>
        <td>
          <table>
            <tr>
              <td>|</td>
              <td><input type=button class=buttons value=Button></td>
              <td>|</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>
Actual Results:  
Button is squeezed out on the right side of the screen

Expected Results:  
Removing the "width: 100%;" in the CSS style definition produces the expected result.
Confirmed with code provided by reporter.
Component: General → Layout: Tables
Keywords: testcase
Product: Firefox → Core
QA Contact: general → layout.tables
Version: unspecified → Trunk
I don't get whats the issue here 100% of nothing is nothing.
If a table/cell does not specify a width then the width is not nothing.  It is then up to the user agent to determine the best width to fit the content of the table cell.  This is my interpretation of the W3C HTML standards.  I would suggest that a CSS attribute of "width: 100%" would be ignored if no width is specified for the table cell.  Please show the fully rendered button.
The MCW (MEW) of pct based frame is 0 so it can be squezzed as it is now.
The fact is that Internet Explorer, Mozilla, and the previous version of Firefox all render this button correctly.  To maintain or increase Firefox's market-share bugs like this, which appear to be introduced accidentally, need to be fixed.  This breaks existing code and decreases Firefox's compatibility with competing browsers.
David, any thoughts on this one?
Flags: needinfo?(dbaron)
I think my patches to bug 823483 will fix this (since they expand the quirk in one way (max-width too) and restrict it in another (fewer frame types); the latter is what matters here); just need to finish them (and figure out why the tests I wrote weren't all passing)...
Depends on: 823483
Flags: needinfo?(dbaron)
It does fix it. 
Tested with Firefox Nightly.
bug 823483 fixes it.
Status: UNCONFIRMED → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: