css table-cell and vertical align middle not working in firefox - html

Question

I am trying to vertically center the contents of .onesizechart, which I have working in bothChrome and Safari, but does not work in either Firefox or IE. The contents of .homepage-sizechart are displaying fine which makes me think I am missing something very simple. Any ideas?
HTML/Liquid
<div class="medium-3 small-6 columns homepage-products left" onclick="location.href='{{ product.url }}'">
<div class="product-preview-image-div">
<a href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image | product_img_url: 'grande' }}" alt="{{ product.title | escape }}" />
</a>
{% assign contains_os = false %}
{% for variant in product.variants %}
{% if variant.title contains 'OS' %}
{% assign contains_os = true %}
{% endif %}
{% endfor %}
{% if contains_os %}
<div class="onesizechart">
{% for variant in product.variants %}
{% if variant.inventory_quantity == 0 %}
<img src="{{ 'onesize-triangle-outofstock.png' | asset_url }}"/>
{% else %}
<img src="{{ 'onesize-triangle.png' | asset_url }}"/>
{% endif %}
{% endfor %}
</div>
{% else %}
<div class="homepage-sizechart">
<div class="sizes">
{{ 'size-triangle.png' | asset_url | img_tag }}
{% for variant in product.variants %}
<span class="{{ variant.title }}-product {% if variant.inventory_quantity == 0 %}outofstock{% endif %} {% if variant.title contains 'OS'%}hide{% endif %}">{{ variant.title }}</span>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
CSS
.homepage-products {
cursor: pointer;
margin-top: 20px;
}
.homepage-sizechart {
bottom: 0;
display: table-cell;
left: 0;
margin: auto;
opacity: 0;
position: absolute;
right: 0;
text-align: center;
top: 5%;
vertical-align: middle;
width: 90%;
z-index: 999;
}
.onesizechart {
opacity: 0;
position: absolute;
display: table;
width: 90%;
z-index: 999;
top: 5%;
bottom: 0;
right: 0;
margin: auto;
text-align: center;
}
.onesize {
display: table-cell;
vertical-align: middle;
}
.sizes {
position: relative;
}

Answer 1

You need to set your parent container to display:table; for the child elements using display:table-cell to inherit tabular like properties such as vertical-align.
HTML:
<div class="container">
<div class="panel">
hey
</div>
<div class="panel">
hey
</div>
</div>
CSS:
.container {
display:table;
height:100px;
}
.panel {
display:table-cell;
vertical-align:middle;
border:1px solid red;
}
Although you haven't provided the CSS for the .product-preview-image-div class above, I'm guessing that this is most likely the problem at play.
JSFiddle: http://jsfiddle.net/a4fyg/