list item showing differently on ipad to any other device - ios

Question

I have a list item (ul li) that is in my header of my site, and when it is in any browser, it works well, it works fine. But when I access the website on my ipad, the first and last link go down.
here is what I mean:
and this is on my iPad:
Here is the code:
#header #personals nav ul li {
display: inline-block;
margin: 0;
}
#header #personals nav ul li a {
padding: 25px;
margin: 0;
}
.settings {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
position: relative;
background: url('images/settings.png') no-repeat center 15px;
height: 20px;
width: 50px;
padding: 15px;
padding-bottom: 103px;
}
.calendar {
background: url('images/calendar.png') no-repeat center center;
padding: 15px;
height: 30px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
width: 50px;
}
Here is the jsfiddle: JSFiddle

Answer 1

Try this
Remove the padding-bottom property on the .settings rule and change the 15px value on the background property to center.
.settings {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
position: relative;
background: url('http://i58.tinypic.com/21o4ikl.png') no-repeat center center;
height: 20px;
width: 50px;
padding: 15px;
}