Open Bug 448251 Opened 16 years ago Updated 2 years ago

Checkbox and radio button margins break CSS layout in FF3 on Mac OS X

Categories

(Core :: Widget: Gtk, defect, P5)

Product:
Core
Component:
Widget: Gtk
Platform:
PowerPC
macOS
Type:
defect

Tracking

()

People

(Reporter: bean10, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; de; rv:1.9.0.1) Gecko/2008070206 Firefox/3.0.1
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; de; rv:1.9.0.1) Gecko/2008070206 Firefox/3.0.1

I like the fact that FF3 uses the OS look and feel on my Mac. However, checkboxes and radio buttons have way too much margin, so they break every CSS layout. To adjust these resources so they are rendered as in FF2 or Safari, I kindly request to change the forms.css style sheet:

/* radio buttons */
input[type="radio"] {
  -moz-appearance: radio-small;
  width: 13px;
  height: 13px;
  margin: 0px 3px 0px 1px;
  vertical-align: text-bottom;
  padding: 0 !important;
  cursor: default;
  -moz-binding: none;
  -moz-border-radius: 100% !important;
}

/* check boxes */
input[type="checkbox"] {
  -moz-appearance: checkbox-small;
  width: 13px;
  height: 13px;
  margin: 0px 2px 0px 1px;
  vertical-align: text-bottom;
  padding: 0 !important;
  cursor: default;
  -moz-binding: none;
  -moz-border-radius: 0 !important;
}


Reproducible: Always
Can you post a solid testcase to illustrate your case? Or point to a site that is 'broken' due to this ?
Component: OS Integration → Layout: Form Controls
Product: Firefox → Core
QA Contact: os.integration → layout.form-controls
Basically, you can see it on any page containing a form. You can e.g. check the TYPOlight online demo or use the HTML code below. FF3 and Safari do not render checkboxes and radio buttons the same (FF3 adds way too much margin).

http://demo.typolight.org/typolight/main.php?do=user&act=edit&id=3

---- Example HTML code ----

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Form test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form>
<fieldset>
  <legend>Fieldset</legend>
  <input type="checkbox" /> <label>Checkbox 1</label><br />
  <input type="checkbox" /> <label>Checkbox 2</label><br />
  <textarea></textarea>
</fieldset>
<fieldset>
  <legend>Fieldset</legend>
  <input type="radio" /> <label>Radio 1</label><br />
  <input type="radio" /> <label>Radio 2</label><br />
  <input type="text" />
</fieldset>
</form>
</body>
</html>

P.S.: If you check the TYPOlight online demo, simply click the login button so you are being redirected to the page mentioned above.
That change to forms.css would regress other cases (esp. non-themed controls).

Sounds like the native theme code is just adding too much whitespace on Mac.

I should note that any layout that breaks on this is pretty badly designed...
Status: UNCONFIRMED → NEW
Component: Layout: Form Controls → Widget: Gtk
Ever confirmed: true
QA Contact: layout.form-controls → gtk
This is not about badly designed layouts :-)

There are differences in the way that FF3 renders those elements compared to Safari and even FF2. I am sure that you don't want FF3 to become the next Internet Explorer and force everybody to use CSS hacks to standardize those elements, do you?

If you say "Sounds like the native theme code is just adding too much whitespace on Mac" - does that mean that the theme uses a different style sheet than forms.css? Then I would like to request to adjust this one.

Thank you for your help.

I have just checked FF3 on Windows XP and there is too much margin, too.
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.