I have cross browser front-end display issues on my contact form

Question

I am attempting to build myself a portfolio and as part of a course I am taking I've prepared the front-end of a contact form.

I developed it keeping Google Chrome in mind and using a screen resolution of 1024x768px as the base, hence it looks good even on my 1920x1080px screen.

I've run into cross browser compatibility issues in the latest versions of IE and Firefox. The site looks and behaves fine on Google Chrome.

In IE:

• The comments box appears wider than the rest of the form elements
• The "Legend" title's font colour is black instead of white

In FireFox:

• The comments box and the "How did you find this site?" textbox are not aligned with the rest of the above form elements in terms of width size.

I am not particularly all that sure on how to get them to look more or less equal across all three browsers. To the best of my knowledge the CSS I used should be cross-browser supported.

Here's my code:

        body {
          font-family: "Ludica Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
          background-color: #E0E1E3;
          margin: 0 auto;
          padding: 0;
        }
        h1 {
          color: #f5f5f5;
          font-size: 4em;
          padding: 0;
          margin: 0 auto;
        }
        .break {
          clear: both;
        }
        #header {
          margin: 0 auto;
          width: 100%;
          background-color: #FF4C65;
          text-align: center;
        }
        #wrapper {
          margin: 0 auto;
          padding: 0;
        }
        #loginContainer {
          position: relative;
          top: 100px;
          background-color: #21282E;
          color: #f5f5f5;
          margin: 0 auto;
          padding: 0;
          width: 400px;
          height: 390px;
        }
        fieldset {
          border: none;
          width: 90%;
          margin: 0 auto;
          padding: 0;
          text-align: center;
          height: 385px;
          color: #FF422C;
        }
        .spacer {
          display: inline-block;
          box-sizing: border-box;
          padding-left: 5px;
          height: 40px;
          line-height: normal;
          margin: 5px 7px 2px 7px;
          font-size: 0.81em;
        }
        textarea {
          margin-top: 5px;
          min-width: 325px;
          min-height: 150px;
          padding-left: 5px;
        }
        #survey {
          padding-top: 0;
          margin: 0;
          width: 325px;
          height: 40px;
          line-height: normal;
          padding-left: 5px;
        }
        #submitButton {
          margin-top: 10px;
          text-align: center;
          border: 0;
          width: 130px;
          height: 30px;
          background-color: #FF422C;
          cursor: pointer;
          color: white;
          transition: all 0.5s ease;
        }
        #submitButton:hover {
          background-color: grey;
        }

<div id="wrapper">
  <div id="header">
    <h1>GET IN TOUCH</h1>
  </div>

  <!-- Clear the floats -->
  <div class="break"></div>

  <div id="loginContainer">
    <fieldset>
      <legend>Fill in your details here</legend>
      <form action="getintouch.php" type="get" id="getintouch">
        <input type="text" name="name" placeholder="Full Name" class="spacer" required/>
        <input type="email" name="email" class="spacer" placeholder="Email" required/>
        <input type="tel" name="telephone" class="spacer" placeholder="Phone" required/>
        <input type="text" name="titleAndCompany" class="spacer" placeholder="Title and company" />
        <textarea name="comments" placeholder="What can I help you with?" required></textarea>
        <input type="text" name="survey" id="survey" placeholder="How did you find this site?" required/>
        <button type="submit" id="submitButton">Submit</button>
      </form>
    </fieldset>
  </div>

</div>

Here's a link to the jsfiddle: http://jsfiddle.net/knadoor/bm2LbbL4/

Advice appreciated!! :-)

PS: For the experienced coders here, I'd love to get your opinion on the layout of my code (my background is not web development).

Thanks

EDIT: Here's a link to my complete code snippet (I'm using the http://pastebin.com/gBJR1Nd3

The first picture is Google Chrome, second being Firefox and the third is IE.

Answer 1

It is good to normalize or even reset your css code when you take care of making your website cross browser.

You can learn more on normalization here: http://necolas.github.io/normalize.css/, it basically overrides defualt browser settings for CSS so that you can have more control over how things look.

Also, I can see you using box-sizing - make sure browsers you are aiming to are supporting this feature (adding -webkit, -moz, -o prefixes wouldn't hurt). Make sure your page has a correct doctype.

Other than that your code looks good and should not casu any troubles. It is nice seeing someone using proper display attributes.