3

When building a form I have come across some weird differences in sizing and spacing between Firefox and Google Chrome.

enter image description here

First off, in Firefox there's a pixel difference between the first input in each column.

Moreover, text inputs have different heights, also the space between the textarea and the input below is different making it impossible to align everything properly.

But the most peculiar thing is, the textarea and text inputs have the same bottom margin, but in Google Chrome elements coming after them aren't aligned.

.input {
  // ...
  margin-bottom: 12px;
}

Where are these differences coming from and how should I fix them?

Update Normalize CSS doesn't fix any of this except for the one pixel difference on the top.

Code for this form: https://jsfiddle.net/jLcojhq0/2/

Kuba Szymanowski
  • 1,307
  • 11
  • 25
  • 1
    Duplicate of https://stackoverflow.com/questions/12936753/css-reset-for-chrome ? – mplungjan Jan 09 '18 at 15:52
  • 1
    Each browser has a default set of CSS rules it applies to any page, before any site-supplied rules are given. You simply want to overwrite and normalise these browser defaults, so perhaps research [**CSS Normalize**](https://necolas.github.io/normalize.css/) – Martin Jan 09 '18 at 15:54
  • 1
    CSS Normalize doesn't fix any of this except for the pixel difference on the top. – Kuba Szymanowski Jan 09 '18 at 15:56
  • Ok Add that information in to your question. – Martin Jan 09 '18 at 15:58
  • 1
    @mplungjan The accepted solution for this question, which is applying Normalize CSS, fixes only the pixel difference on the top. I added a notice about this. – Kuba Szymanowski Jan 09 '18 at 16:03
  • Your fiddle code looks strange to me… You are using label tags pointlessly (missing properties); you are toying with the box-sizing property, which can raise difficult conceptual problems, specifically cross-browser one — what is more, using the * universal descriptor; you are using rems (relative ems) to cloud up the issue a bit more. I suggest you rewrite your markup canonically and make you css as straight as can be. Then we will try to help you. – Brice Coustillas Jan 09 '18 at 16:26
  • @BriceCoustillas I have updated my fiddle according to your suggestions. However I cannot get rid of the `box-sizing` because then the inputs overflow out of their containers. – Kuba Szymanowski Jan 09 '18 at 16:37

0 Answers0