Sppierce Sppierce - 5 months ago 9
HTML Question

Content remains behind :before Div overlay in IE

I am struggling with this overlay. On the prod site the :before element overlays a div with a full image bg. When viewing the site in Chrome and Firefox the content is displayed above the overlay as intended. However, when viewing the content in IE11 the :before element overlays everything in that parent div.

I would like the result in Chrome to be the same in IE.

Ex. Overlay above image, text/content on top of the overlay.

See: JSFiddle



.foreverCTA:before {
content: "";
width: 100%;
height: 900px;
background: #2f71a9;
background: -webkit-radial-gradient(circle, transparent -25%, #2f71a9 81%);
background: -o-radial-gradient(circle, transparent -25%, #2f71a9 81%);
background: -moz-radial-gradient(circle, transparent -25%, #2f71a9 81%);
background: radial-gradient(circle, transparent -25%, #2f71a9 81%);
position: absolute;
left: 0;
}

.foreverCTA {
color: #fff;
/*display: flex;*/
background: #fff url("images/2015APR06_RAYSBASEBALL_MFPB6240s.jpg") no-repeat center;
background-size: cover;
height: 900px;
/*justify-content: center;
flex-wrap: wrap;
align-items: center;*/
}

.foreverCTA p,
.foreverCTA h2,
.foreverCTA h4 {
color: #fff!important;
}

.foreverCTA li,
.foreverCTA ul {
list-style: none;
padding: 0;
}

.foreverCTA p,
.foreverCTA h3,
.foreverCTA h2,
.foreverCTA li {
-webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .4));
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .4));
}

.ion-ios-baseball {
margin: 3px;
padding-top: 10px;
font-size: 2em;
vertical-align: center;
}

.foreverGame {
margin-top: 50px;
}

.foreverHeader {
padding-top: 50px;
/*-webkit-flex: 1 1 100%;
-moz-flex: 1 1 100%;
-ms-flex: 1 1 100%;
-o-flex: 1 1 100%;
flex: 1 1 100%;
z-index: 999;*/
}

.waysToBuy {
margin: 50px 0;
}

.buyDetails {
min-height: 210px;
text-align: center;
}

.foreverHeader h1,
.waysToBuy h1 {
font-size: 4.5em;
color: #ECDC00!important;
padding: 0!important;
margin: 0;
-webkit-filter: drop-shadow(2px 4px 0px rgba(249, 159, 28, 1));
filter: drop-shadow(2px 4px 0px rgba(249, 159, 28, 1));
}

.foreverHeader h3 {
font-size: 3.5em;
color: #fff!important;
margin: 5px;
}

.foreverBuy {
/*display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: flex-start;*/
}

.buy1,
.buy2 {
height: 400px;
/*display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
align-items: flex-end;
flex-basis: 20%;*/
}

.buyDetails {
/*align-self: flex-start;*/
}

.buyButton {
/*flex-basis: 50%;
align-self: center;*/
vertical-align: bottom;
}

.buy2 a {
color: #ECDC00!important;
}

<div class="foreverCTA">
<div class="row">
<div class="foreverHeader">
<h3>Lorem ipsum<br></h3>
<h1>Lorem ipsum<br></h1>
<h3>Lorem ipsum</h3>
</div>
</div>
<div class="row">
<div class="foreverGame">
<h2>Lorem ipsum</h2>
</div>

<div class="foreverDate">
<h3>Lorem ipsum</h3>
</div>
</div>
</div>




Answer

This will do the trick,

check this fiddle here

first remove position:absolute property and add following properties as,

display:block;
margin-bottom:-900px;

so your final CSS will be as follows,

.foreverCTA:before {
    content: "";
    width: 100%;
    height: 900px;
    background: #2f71a9;
    background: -webkit-radial-gradient(circle, transparent -25%, #2f71a9 81%);
    background: -o-radial-gradient(circle, transparent -25%, #2f71a9 81%);
    background: -moz-radial-gradient(circle, transparent -25%, #2f71a9 81%);
    background: radial-gradient(circle, transparent -25%, #2f71a9 81%);
    left: 0;
    display:block;
    margin-bottom:-900px;
}
Comments