How to make both element inside a table has the same height

Question

So I have made something like this in firefox browser :

But in chrome (v53). The height property is not equal :

There is a difference of 1px of height. Is there any solution? If you want to see the live page, just visit my site here

Sorry for my english.

Post your markup and CSS, links to sites and external resources can disappear, and when they do this question will be useless — Asons, Jan 31 '17 at 16:41
This problem is common http://stackoverflow.com/questions/7229568/input-height-differences-in-firefox-and-chrome — amansinghgusain, Jan 31 '17 at 17:09

score 0 · Accepted Answer · answered Jan 31 '17 at 17:17

The simplest solution would be to remove the individual borders on each div and just use the container to get what you need,

https://jsfiddle.net/uqdmvonv/

Example:

div.pp-footer1-container1 div.pp-footer1-fill4{
    display: table;
    border: 2px solid white;
    border-radius: 8px;
}
div.pp-footer1-container1 div.pp-footer1-fill4{
    border: none;
    border-right: 2px solid white; // This is for that middle bar
}
div.pp-footer1-container1 div.pp-footer1-fill4 a:hover{
    text-decoration: none;
    background-color: white;
    color: #ff0000;
    transition: all .5s ease;
}

How to make both element inside a table has the same height

1 Answers1