CSS/margin difference Firefox - Chrome

Question

I'm trying to put titles on images. Everything is just as I wanted in Chrome but it's not the same in Firefox.

Here is jsfiddle : http://jsfiddle.net/xibalbian/J6WUt/

HTML:

<div class="poster-wrapper">
     <ul class="poster-ul">
         <li><a href="jin.html" class="poster-a"><img src="images/jin2.png" alt="" class="poster-img"><span class="title1">Jin</span></a></li>
         <li><a href="guzel.html"><img src="images/guzel-gunler-fino.png" alt="" class="poster-img"><span class="title2">Guzel Gunler Gorecegiz</span></a></li>
         <li><a href="araf.html"><img src="images/araf-fino.png" alt="" class="poster-img"><span class="title3">Araf</span></a></li>
         <li><a href="sen.html"><img src="images/sen-fino.png" alt="" class="poster-img"><span class="title4">Sen Aydinlatirsin Geceyi</span></a></li>
         <li><a href="zenne.html"><img src="images/zenne-fino.png" alt="" class="poster-img"><span class="title5">Zenne</span></a></li>
         <li><a href="kuma.html"><img src="images/kuma-fino.png" alt="" class="poster-img"><span class="title6">Kuma</span></a></li>
         <li><a href="hayat.html"><img src="images/hayat-boyu-fino.png" alt="" class="poster-img"><span class="title7">Hayat Boyu</span></a></li>
     </ul>
        </div>

CSS:

.poster-wrapper {
padding:0;
margin-top:18%;
margin-left:20%;
position:absolute;
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
}

.poster-ul {
padding:0;
display:block;
list-style-type:none;
text-decoration:none;
}

.title1 {
position:absolute;
margin-top:-16%;
margin-left:55%;
font-family: 'rbno21a-blackitalicdemo', 'lato', sans-serif;
font-size:4em;
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
color:#fff;
padding-left:20px;
padding-right:20px;
background-color:rgba(0, 0, 0, 0.46);
z-index:10000;
}

.title2 {
position:absolute;
margin-top:-20%;
margin-left:20%;
font-family: 'rbno21a-blackitalicdemo', 'lato', sans-serif;
font-size:4em;
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
color:#fff;
padding-left:20px;
padding-right:20px;
background-color:rgba(0, 0, 0, 0.46);
}

.title3 {
position:absolute;
margin-top:-18%;
margin-left:55%;
font-family: 'rbno21a-blackitalicdemo', 'lato', sans-serif;
font-size:4em;
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
color:#fff;
padding-left:20px;
padding-right:20px;
background-color:rgba(0, 0, 0, 0.46);
}

.title4 {
position:absolute;
margin-top:-20%;
margin-left:20%;
font-family: 'rbno21a-blackitalicdemo', 'lato', sans-serif;
font-size:4em;
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
color:#fff;
padding-left:20px;
padding-right:20px;
background-color:rgba(0, 0, 0, 0.46);
}

.title5 {
position:absolute;
margin-top:-19%;
margin-left:50%;
font-family: 'rbno21a-blackitalicdemo', 'lato', sans-serif;
font-size:4em;
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
color:#fff;
padding-left:20px;
padding-right:20px;
background-color:rgba(0, 0, 0, 0.46);
}

.title6 {
position:absolute;
margin-top:-20%;
margin-left:50%;
font-family: 'rbno21a-blackitalicdemo', 'lato', sans-serif;
font-size:4em;
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
color:#fff;
padding-left:20px;
padding-right:20px;
background-color:rgba(0, 0, 0, 0.46);
}

.title7 {
position:absolute;
margin-top:-20%;
margin-left:45%;
font-family: 'rbno21a-blackitalicdemo', 'lato', sans-serif;
font-size:4em;
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
color:#fff;
padding-left:20px;
padding-right:20px;
background-color:rgba(0, 0, 0, 0.46);
}

I don't get why this is happening. Also I'm sorry for messy code.

Here are my screenshots on different browsers:

https://i.sstatic.net/5IDsG.jpg - Chrome

https://i.sstatic.net/bgAv6.jpg - Firefox

All images are 600 x 150px.

Answer 1

Instead of using margins, use the top and left attribute to position your absolute elements. That's what they're for!

Fiddle: http://jsfiddle.net/J6WUt/2/