Search code examples
htmlcssgoogle-chromefirefoxposition

Firefox absolute position different then Chrome

I have been encountering an error lately with some code. Basically, the absolute position property works correctly on Chrome but gives different results on Firefox. Any ideas why?

Representations:

Chrome: Correct

Firefox: Incorrect NOTE: On the firefox representation the second small box exists but is cut off.

Code:

HTML:

<div id="card-info">
        </div>
        <div class="arrow-wrapper">
            <i class=" visible-lg arrow-left pull-left fa fa-arrow-circle-o-left fa-4x" aria-hidden="true"></i>
            <i class="visible-lg arrow-right pull-right fa fa-arrow-circle-o-right fa-4x" aria-hidden="true"></i>
        </div>

SCSS:

.left-arrow {
    right: 90%;
    left: 10%;
}
.right-arrow {
    left: 90%;
    right: 10%;
}
.arrow-wrapper {
    position: absolute;
    padding-left: 100px;
    padding-right: 100px;
    width: 100%;

}
Solution

  • add to the absolute element this CSS because firefox need a explicit position when you use position:absolute;

    left: 0;
right: 0;
top: 50%;