Different CSS fixed element results in Chrome and Firefox
I have this html:
<div class="lightbox">
<div class="lightbox-content-wrapper">
<div class="lightbox-content-inner-wrapper">
<div class="lightbox-content">
<!-- Popup Form -->
<div class="lightbox-form-wrapper">
Test
</div>
</div>
</div>
</div>
</div>
and this CSS:
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
background: rgba( 0, 0, 0, .7 ) repeat;
}
.lightbox-content-wrapper {
background-color: #FFF;
width: 20%;
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: auto;
display: table;
text-align: center;
border: 10px solid #2980B9;
}
This is a fiddle: http://jsfiddle.net/p2omaw29/1/ .
I want to create a lightbox that fits in the center of the screen. If you open the script in Chrome and Firefox, you can see that it gives different results. In Chrome, the window is placed directly in the center of the screen, and in Firefox, it is placed on top, as if the rule is bottom: 0;
not working.
So what makes the results different? I tweaked CSS in one hour with no result.
Thank you in advance!
source to share
Setting the bottom and top to zero gives the element a 100% height. It starts at the very top and ends at the very end. That the results differ across browsers is due to different implementations of the display table property. If you set it to table-cell, you should be able to see what is actually happening in both browsers.
Here's how you could get the element to be in the center of the screen.
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
background: rgba( 0, 0, 0, .7 ) repeat;
}
.lightbox-content-wrapper {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #FFF;
width: 20%;
text-align: center;
border: 10px solid #2980B9;
}
Please note that it does not work in Internet Explorer 8 and below, and that you need a prefix for Internet Explorer 9.
source to share