Opera 12.16 required circular images produced oval

Problem

I am creating a theme for a client of mine, and he gave a design that require some rounded images with border and shodow.

The problem is in Opera, that produces oval shapes instead of circular images.

Here is the result produced by Opera :

enter image description here

and this is the required result, and what the Chrome for example produce:

enter image description here

My HTML code is the following

<div class="row homeCategoryImageLinks">
    <div class="columns large-3 small-6 medium-6 ">
        <a href="#">
            <img src="oil.jpg" />
        </a>
    </div>
    <div class="columns large-3 small-6 medium-6 ">
        <a href="#">
            <img src="oinopoioa.jpg" />
        </a>
    </div>
    <div class="columns large-3 hide-for-small hide-for-medium ">
        <a href="#">
            <img src="athairia.jpg" />
        </a>
    </div>
    <div class="columns large-3 hide-for-small hide-for-medium ">
        <a href="#">
            <img src="meli.jpg" />
        </a>
    </div>
</div>

And this is my CSS Code:

.homeCategoryImageLinks
{
    margin-top: -164px !important;
    z-index: 3500 !important;
    margin-bottom: 25px !important;
}

.homeCategoryImageLinks div.columns
{
    z-index: 3501;
}

.homeCategoryImageLinks a
{
    z-index: 3502;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    padding: 5px;
    background-color: #FFF;
    border-radius: 55%;
    display: table;
}

.homeCategoryImageLinks a img
{
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: table-row;
    width : 100%;
}

The whole project is based on Foundation framework, thus some classes in HTML elements are related to Foundation framework.

Here you can find a DEMO of my code.

UPDATE 1

This is the result when I hover the column a level above the element in inspection mode of the Opera.

enter image description here

It seams like the anchor resized horizontaly but not vertically.

Problem courtesy of: Merianos Nikos

Solution

Try setting the box-sizing to border-box on the links.

homeCategoryImageLinks a
{
    z-index: 3502;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    padding: 5px;
    background-color: #FFF;
    border-radius: 55%;
    display: table;

    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

I am thinking the problem is that you add padding to the links and then set the width of the image to 100% so it will include the padding which will in turn expand the link..


Alternatively you could add a border of 5 pixels to the image instead of padding to the link..

Update

Try

.homeCategoryImageLinks a
{
    z-index: 3502;
    display: table;
}

.homeCategoryImageLinks a img
{
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    display: table-row;
    width : 100%;
    border:5px solid white;


    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);

}
Solution courtesy of: Gaby aka G. Petrioli

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.