Only Firefox ignoring 100% height with display: table-cell

Question

I'm trying to vertically center an element by setting its parent to display: table and then the element to display: table-cell; vertical-align: middle;. I'm also setting the height of the element to 34% and its parent to 100% so it fills the screen.

This is working perfectly well on every browser (including IE 8+) but Firefox. Firefox just ignores the height and collapses to the height of the span element.

Why would this be happening?

CSS

#homeNav ul {
  padding: 0;
  margin: 0;
  height: 100%;
}
#homeNav li {
  height: 34%;
  display: table;
  width: 100%;
}
#homeNav li a {
  min-height: 177px;
  height: 100%;
  line-height: 100%;
  display: block;
  text-decoration: none;
  font-size: 48px;
  border-bottom: 1px solid #fff;
  display: table-cell; vertical-align: middle;
}
#homeNav li a.last {
  border-bottom: none;
}
#homeNav li a:hover, #homeNav li a.active {
  background: none;
}
#homeNav li a span {
  padding: 50px 0 50px 100px;
  display: block;
  background: url(../images/main-nav-hover_bg-large.png) no-repeat;
  background-position: 120px 50px;
  padding-left: 160px;
}

Answer 1

Take all the height declarations off: an item set to display: table-cell as a child of some element set to display: table should always be 100% height of its parent.

You also have display: block and display: table-cell on the same element. Even though the display: table-cell will take precedence (because it's last), you should try and keep your code clean.

The code below works in Firefox for me:

HTML:

<div>
    <a href="#">test</a>
</div>

CSS:

div { display: table; height: 100px; border: 4px solid #000; width: 300px;}
a { display: table-cell; border: 4px solid #0f0; vertical-align: middle; text-align: center; }

Demo on JS Fiddle.