padding-top does not affect Chrome

Question

Illustration of the problem as seen in Chrome:

problem as seen in chrome

The expected behaviour and FF one:

expected behaviour as seen in firefox

We're making a page, Hybrid Orange, but the padding-top seems not to affect the height of the div Tecnología in Chrome. I want the div to be 100% height, so the first px scrolled is the next section. I'm not sure what causes this behaviour to be different in FF and Chrome.

Relevant part of the HTML:

<nav>
  <header id = "bar">
    [...]
  </header>
  <ul>
    [...]
  </ul>
</nav>

<div id = "inicio">
  [...]
</div>

<div id = "tecnologia">
  <div class = "v_center">
    <div class="container clearfix">
      <div id="tecno-web" class="tecno-div">
      [...]
      </div>
    </div>
  </div>
</div>

Relevant part of the css:

nav {
  position: absolute;
  top: 60%;
  z-index: 100;
  width: 80%;
  height: 4em;
  padding: 0 10%;
  /* Bug of android's browser: http://stackoverflow.com/q/19254146/938236 */
  -webkit-backface-visibility: hidden;
  background-color: #FFF;
  box-shadow: 0 2px 8px -1px gray
  }

#tecnologia {
  display: table;
  position: relative;

  width: 100%;
  padding-top: 4em;
  /* height of this section is 100% (-4em is to compensate the padding-top) */
  height: calc(100% - 4em);

  background-color:#68a4dc;
  background-image: url('/images/fondo_azul.jpg');
  color:#ffffff;
  }

The expected behaviour is this: tecnologia height is 100%, which comes from its actual height (100% - 4em) + the height of the padding-top. However, in Chrome this padding top seems not to increase the Tecnología section. It behaves as expected in Firefox. If I set height: 100%; it works in Chrome, but breaks in Firefox (too long), as expected from the height + the padding.

Your #technologia section is set to display: table. If you set it to display: block it should work as expected. Although, you may need to adjust the vertical layout of your techno-div items — PhillipKregg, Feb 05 '14 at 22:40
I need it to be `display: table;` since I want to vertically center a variable-height element... my question is more about why the behaviour is different. Thanks though, I'll try some workaround. — Francisco Presencia, Feb 05 '14 at 22:42

score 5 · Accepted Answer · answered Feb 05 '14 at 22:48

If you want a quick workaround, try this

#tecnologia {
  display: table;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  width: 100%;
  padding-top: 4em;
  height: 100%;

  background-color:#68a4dc;
  background-image: url('/images/fondo_azul.jpg');
  color:#ffffff;
}

I tested it in Chrome and Firefox and it seemed to fix the issue. The real problem here is that you're setting

display: table

for #technologia. Chrome is subtracting the 4em padding from the height automatically, which is redundant when you set the height to 100% - 4em. Firefox, on the other hand, doesn't do this.

Ideally, you shouldn't be using table layouts anyway. Table display implementations across different browsers are terribly uncoordinated, and your reset.css doesn't account for this special case.

Perfect, it worked like a charm. Thank you so much. Unfortuantelly from [In the Woods - Verticall Centering with CSS](http://blog.themeforest.net/tutorials/vertical-centering-with-css/) this is the only method that accounts for variable height of the content — Francisco Presencia, Feb 05 '14 at 22:54

padding-top does not affect Chrome

1 Answers1