CODEWITHSUNDEEP
htmlcssimageinternet-explorerfirefox
Eric Filkins
Eric Filkins

Reputation: 329

CSS align:vertical; not working properly in Firefox

I am trying to vertically center the contents of .onesizechart, which I have working in both Chrome and Safari, but does not work in either Firefox or IE. In Chrome and Safari the contents displays like so on hover like so but in Firefox and IE the contents display like this when I hover like this . The live site is here Not exactly sure what is causing this.

HTML/Liquid

<div class="medium-3 small-6 columns homepage-products left" onclick="location.href='{{ product.url }}'">   
    <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>

CSS

.homepage-products {
    cursor: pointer;
    margin-top: 20px;
}

.onesizechart {
    opacity: 0;
    position: absolute;
    display: table;
    width: 90%;
    z-index: 999;
    top: 5%;
    bottom: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

.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;
}

.sizes {
    position: relative;
}

Upvotes: 1

Views: 90

Answers (1)

Tamil Selvan C
Tamil Selvan C

Reputation: 20199

Try this change it display: inline-block; top: 30%;

.onesizechart {
    opacity: 0;
    position: absolute;
    display: inline-block;
    width: 90%;
    z-index: 999;
    top: 30%;
    bottom: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

Upvotes: 1

Related Questions