отображение ползунка в хром с использованием основы 3

Я создаю сайт, используя основание 3 и собственный ползунок на орбите.

пока что так хорошо... но информация ползунка не отображается в правильном месте в хроме.

хорошо, легко исправить, я слышу, что вы говорите... применяйте хром-специфические стили. Хорошо, мне нравится идея, за исключением того, что беспорядок с safiri, который делает страницу прекрасной.

Html:

<div id="featured">
    <div>
        <img src="images/slider/ironman-txt.jpg" alt="">
        <div class="featuredInfo">
        <h3>IRON MAN</h3>
        <hr />
        <p>When Tony Starks world is torn apart by a formidable terrorist called the Mandarin, Stark starts an odyssey of rebuilding and retribution.</p>
            <ul class="featuredActions">
            <li><a href="#">Watch Trailer</a></li>
            <li>-<a href="#">15 PG Rating</a></li>
            <li><a href="#">Book Seats</a></li>
        </ul>
        </div>
    </div>
</div>

Css (scss):

#featured {
    background-color: $white;
    max-height: 400px;
    .featuredInfo {
    float: right;
    padding: 0 1em;
    max-width: 25.5em;
    height: 100%;
    z-index: 10; 
    h3 {
        padding: 0.5em 0 0.1em 0;
        margin: 0;
        text-transform: uppercase;
    }
    hr {
        margin: 7px 0;
        border-color: $txtColor;
        height: 2px;
        border-width: 1px;
    }
}

живая ссылка:

http://madmantis.co.uk/sites/schwack/

Я знаю, что если я добавлю позицию: relative; и сверху: -400px; признак info div переместится в правильное положение в хроме, но, очевидно, выбивает другие браузеры.

Я немного обеспокоен тем, что использую фундамент, я не вижу, что неправильно...