Fotorama align arrows at top in all browsers? Not working in IE :(

Question

Im trying to align the left and right arrows on Fotorama to the top. I have managed to do it in chrome, firefox etc but it aligns vertical center in all versions of IE. I have tried everything I know of (not to knowledgeable on JS) and I just can't seem to do it :(

I have included the below CSS I editted if that helps at all?

.fotorama__arr {
    display: block;
    position: absolute;
    font-family: sans-serif;
    width: 44px;
    text-align: center;
    z-index: 10;
    color: white;
    opacity:1;
    -webkit-transition-property: opacity, margin;
    -moz-transition-property: opacity, margin;
    -o-transition-property: opacity, margin;
    transition-property: opacity margin;
    font-size: 30px;
    top: 6px;
    text-shadow: black 0 0 5px;
    cursor: pointer;
    font-style: normal!important;
    -webkit-tap-highlight-color: rgba(255,255,255,0.15)
}

Many thanks Joe

Answer 1

I believe this addition should work:

.fotorama__arr {
    top: 0 !important;
    margin-top: 0 !important;
}

Fiddle: http://jsfiddle.net/artpolikarpov/Lj2VA/