Different CSS results on Chrome and Firefox - css

Question

I have this page with books and animated authors names. Theres around 35 books on the page.
http://kutsalkitap.org/kaynaklar/
When you get your mouse on a book, name of the author fades in and goes down slowly. It look perfect on chrome but, on mozilla, names goes way more down than it should be. Passes through the other books section.
I tried a few things but couldn't managed to fix it. Can someone help me?
Here is my css:
<style>
#nav li.parent {
margin-left: 1px;
width: 740px;
height: 130px;
text-align: center;
border: 1px solid #000;
margin: 10px;
list-style: none;
font-family: Montserrat, sans-serif;
font-size: 24px;
}
/* Effect 9: second text and borders */
#nav li.parent a {
margin: 0 20px;
padding: 18px 20px;
}
#nav li.parent a::before, #nav li.parent a::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: #fff;
content:'';
opacity: 0.2;
-webkit-transition: opacity 0.3s, height 0.3s;
-moz-transition: opacity 0.3s, height 0.3s;
transition: opacity 0.3s, height 0.3s;
}
#nav li.parent a::after {
top: 100%;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
#nav li.parent a span:first-child {
z-index: 2;
display: block;
font-weight: 300;
}
#nav li.parent a span:last-child {
z-index: 1;
display: block;
padding: 8px 0 0 0;
color: rgba(0, 0, 0, 0.4);
text-shadow: none;
text-transform: none;
font-style: italic;
font-size: 0.75em;
font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
#nav li.parent a:hover::before, #nav li.parent a:focus::before {
height: 6px;
}
#nav li.parent a:hover::before, #nav li.parent a:hover::after, #nav li.parent a:focus::before, #nav li.parent a:focus::after {
opacity: 1;
-webkit-transform: translateY(0px);
}
#nav li.parent a:hover span:last-child, #nav li.parent a:focus span:last-child {
opacity: 1;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
}
</style>

Answer 1

inline elements are not cross-browser. in your case consider <span> and <a>. use display: block for those elements or if you don't need those to be block, simply use display: inline-block; vertical-align: top;
that should work for you.

Answer 2

You just remove the <br> tag in between the class "text1" and "text2" in every <a> tag.
HTML:
<span class="text1" style="color:#000;font-size:24px;">Bir Satanistin Anıları</span>
<span class="text2" style="color:#000;font-size:18px;">Hershel Smith</span>