Michael Hartl Rails Tutorial - CSS not rendering properly

Question

I already finished the tutorial but I'm having a slight issue with the CSS rendering since section 7 where you make the signup form. This is what I'm getting:

And this is what it's supposed to look like:

And this is the relevant CSS:

@mixin box_sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  padding: 10px;
  height: auto;
  margin-bottom: 15px;
  @include box_sizing;
}

Was wondering if anyone else had the same issue?

Answer 1

The difference is probably with the default height of an input in Chrome vs FireFox (Hartl's browser).

The CSS declaration height:auto; lets the browser calculate the default height.

Answer 2

I had the same issue with Chrome, and although I don't know if it's a good solution, I got the expected results by getting rid of the @include box_sizing; comment:

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  padding: 10px;
  height: auto;
  margin-bottom: 15px;
  // @include box_sizing;
}

Answer 3

Based upon the Handy Sass Mixins by Jake Bresnehan at http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins and the section on Box Sizing, I was able to change the mixin block and the "include" line and get things working with the following situations:

@mixin box_sizing {
  -moz-box-sizing: $box-model;
  -webkit-box-sizing: $box-model;
  box-sizing: $box-model;
}

.debug_dump {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 45px;
  @include box_sizing(border-box);
}

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
  @include box_sizing(border-box);
}

input {
  height: auto !important;
}

which is also referencing the Michael Hartl, Ruby on Rails Tutorial, Ch. 7 at http://ruby.railstutorial.org/chapters/sign-up#top