Skip to content

Commit

Permalink
Fix fieldset width in Chrome and Firefox
Browse files Browse the repository at this point in the history
Fixes an issue in Firefox [1] and Chrome [2]. The implicit width of
`fieldset` can be determined by the width of descendants rather than the
parent container. This change (adding `min-width:0`) makes the
`fieldset` behave like a `div` in this regard.

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=504622
[2] http://stackoverflow.com/questions/8084343/google-chrome-fieldset-overflow-bug

Close necolas#272
  • Loading branch information
thoppe authored and necolas committed Jan 15, 2014
1 parent dafaf9e commit 6992935
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 4 deletions.
10 changes: 6 additions & 4 deletions normalize.css
Original file line number Diff line number Diff line change
Expand Up @@ -257,13 +257,15 @@ figure {
========================================================================== */

/**
* Define consistent border, margin, and padding.
* 1. Define consistent border, margin, and padding.
* 2. Address width being affected by wide descendants in Chrome and Firefox.
*/

fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid #c0c0c0; /* 1 */
margin: 0 2px; /* 1 */
min-width: 0; /* 2 */
padding: 0.35em 0.625em 0.75em; /* 1 */
}

/**
Expand Down
7 changes: 7 additions & 0 deletions test.html
Original file line number Diff line number Diff line change
Expand Up @@ -268,6 +268,13 @@ <h1>Tabular data</h1>
<h1>Forms</h1>

<form>
<div style="width:500px;">
<fieldset>
<legend>Fieldset with a wider child</legend>
<div style="width:600px; height:50px; background:red;"></div>
</fieldset>
</div>

<fieldset>
<legend>Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.</legend>
<p><label>Text input <input type="text" value="default value that goes on and on without stopping or punctuation"></label></p>
Expand Down

0 comments on commit 6992935

Please sign in to comment.