CODEWITHSUNDEEP
htmlgoogle-chromefirefoxcheckboxchromium
Bentley4
Bentley4

Reputation: 11038

Checkbox renders fine in Firefox but not in Chrome

Can anybody tell me why in this example the checkboxes and the text beside it are rendered differently in Chrome as opposed to in Firefox(the desired result)?

Firefox 16.0.2
Chromium 18.0.1025.168 (Developer Build 134367) (WebKit 535.19)

Upvotes: 1

Views: 753

Answers (1)

Bentley4
Bentley4

Reputation: 11038

  1. Put <br> at the end of the same line as your first checkbox input element instead of on the next line. This will horizontally align the checkboxes. See also: text-align: right has margin or buffer in Chrome
  2. Adjust the width of both input elements in that form to 1em. Chrome seems to automatically expand the width of these to the available space in the container while Firefox does not.

This is not a complete fix yet though, there is still a difference in the vertical positioning.

Demo.

Upvotes: 2

Related Questions