Njinx Njinx - 1 month ago 15
CSS Question

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%;

}

Answer

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

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