Inspiring

Answered

Flexbox with IE11

Forum|Forum|7 years ago
April 16, 2018
3 replies
7937 views

I'm having some issues with compatibility in IE11 and flexbox. My site is working correctly in Chrome, Firefox, Edge but not IE. I've researched Google and this forum and learned of "bugs" and issues with columns etc.. in IE but everything I've tried still isn't correcting the issue. I've pasted the code below. Thank you for the help.

<h1 class="sethshead">Southeast Texas Health System</h1>

<h2 class="leveraging">Leveraging partnership and participation among rural community Texas hospitals to deliver the highest quality care through active colaboration.</h2>

</div>

body {

height: 100%;

}

.hero-band-contain {

padding: 0px;

}

.hero-image-overlay {

position: absolute;

}

.sethshead {

color: #2E2E2E;

font-size: 63px;

font-family: 'Oswald', sans-serif;

margin-left: 10%;

margin-top: 9%;

}

.leveraging {

color: #2E2E2E;

font-size: 25px;

font-family: 'Raleway', sans-serif;

font-weight: lighter;

margin-top: 1%;

margin-left: 10%;

width: 46%;

}

.who-we-are-button {

font-family: 'Raleway', sans-serif;

font-size: 28px;

background-color: #7AAC3B;

border-color: #8BBB4E;

margin-top: 2%;

margin-left: 10%

}

How to

This topic has been closed for replies.

Correct answer osgood_

Reshleman wrote
I'm having some issues with compatibility in IE11 and flexbox. My site is working correctly in Chrome, Firefox, Edge but not IE. I've researched Google and this forum and learned of "bugs" and issues with columns etc.. in IE but everything I've tried still isn't correcting the issue. I've pasted the code below. Thank you for the help.
<div class="container-fluid hero-band-contain d-flex flex-column">
<img src="images/hero_image.jpg" alt="" width="10048" height="4304" class="img-fluid"/>
<div class="hero-image-overlay">
<h1 class="sethshead">Southeast Texas Health System</h1>
<h2 class="leveraging">Leveraging partnership and participation among rural community Texas hospitals to deliver the highest quality care through active colaboration.</h2>
<a href="about.html" class="btn btn-primary btn-lg who-we-are-button">WHO WE ARE</a>
</div>
</div>
body {
height: 100%;
}
.hero-band-contain {
padding: 0px;
}
.hero-image-overlay {
position: absolute;
}
.sethshead {
color: #2E2E2E;
font-size: 63px;
font-family: 'Oswald', sans-serif;
margin-left: 10%;
margin-top: 9%;
}
.leveraging {
color: #2E2E2E;
font-size: 25px;
font-family: 'Raleway', sans-serif;
font-weight: lighter;
margin-top: 1%;
margin-left: 10%;
width: 46%;
}
.who-we-are-button {
font-family: 'Raleway', sans-serif;
font-size: 28px;
background-color: #7AAC3B;
border-color: #8BBB4E;
margin-top: 2%;
margin-left: 10%
}

Id say you probably have zero need for the 2 flex classes on your container-fluid <div>. Looks like you are trying to set some text ontop of the image in which case you would just need to make your 'hero-band-contain' css have a position of position: relative; and give a top/left position to your hero-image-overlay css:

.hero-band-contain {

padding: 0px;

position: relative;

}

.hero-image-overlay {

position: absolute;

top: 30px;

left: 50px;

}

O

osgood_Correct answer

Legend

Reshleman wrote
I'm having some issues with compatibility in IE11 and flexbox. My site is working correctly in Chrome, Firefox, Edge but not IE. I've researched Google and this forum and learned of "bugs" and issues with columns etc.. in IE but everything I've tried still isn't correcting the issue. I've pasted the code below. Thank you for the help.
<div class="container-fluid hero-band-contain d-flex flex-column">
<img src="images/hero_image.jpg" alt="" width="10048" height="4304" class="img-fluid"/>
<div class="hero-image-overlay">
<h1 class="sethshead">Southeast Texas Health System</h1>
<h2 class="leveraging">Leveraging partnership and participation among rural community Texas hospitals to deliver the highest quality care through active colaboration.</h2>
<a href="about.html" class="btn btn-primary btn-lg who-we-are-button">WHO WE ARE</a>
</div>
</div>
body {
height: 100%;
}
.hero-band-contain {
padding: 0px;
}
.hero-image-overlay {
position: absolute;
}
.sethshead {
color: #2E2E2E;
font-size: 63px;
font-family: 'Oswald', sans-serif;
margin-left: 10%;
margin-top: 9%;
}
.leveraging {
color: #2E2E2E;
font-size: 25px;
font-family: 'Raleway', sans-serif;
font-weight: lighter;
margin-top: 1%;
margin-left: 10%;
width: 46%;
}
.who-we-are-button {
font-family: 'Raleway', sans-serif;
font-size: 28px;
background-color: #7AAC3B;
border-color: #8BBB4E;
margin-top: 2%;
margin-left: 10%
}

Id say you probably have zero need for the 2 flex classes on your container-fluid <div>. Looks like you are trying to set some text ontop of the image in which case you would just need to make your 'hero-band-contain' css have a position of position: relative; and give a top/left position to your hero-image-overlay css:

.hero-band-contain {

padding: 0px;

position: relative;

}

.hero-image-overlay {

position: absolute;

top: 30px;

left: 50px;

}

ReshlemanAuthor

Inspiring

Osgood_, thank you that worked! I have one more section that I thought I was getting fancy with and again it works in other browsers just fine. Maybe I over complicated this one as well. I have an image in a column and text in another column that is centered. When the screen gets to mobile the image is hidden. When I have a chrome window open and an IE window open it's looking like the problem is occurring with the .escape-logo not scaling correctly. I'm using flex-column and align-items center like before but not over an image. Thanks, for the help.

<h3 class="text-center escape-text">Tailored specifically for the healthcare industry, our ESCAPE program offers professional services for facility assessment and staff training on Active Shooter/Critical Incident Response.</h3>

<a href="escape.html" class="btn btn-primary btn-lg escape-button">LEARN MORE</a>

</div>

.escape-container {

margin-top: 3%;

border-top: 0.5px solid #2B2B2B;

}

.meeting{

padding: 0px;

}

.escape-logo {

margin-top: 5%;

}

.escape-text {

color: #2E2E2E;

font-size: 20px;

font-family: 'Raleway', sans-serif;

font-weight: lighter;

margin-top: 4%;

width: 95%;

}

.escape-button {

font-family: 'Raleway', sans-serif;

font-size: 25px;

background-color: #de3d56;

margin-top: 4%;

border-color: #de3d56;

}

ALsp

Legend

Our home page uses Flexbox:

http://www.projectseven.com

We use our own Flexbox page building tool, though, and we tend to be far more thorough than Adobe in terms of supporting browsers and devices.

pziecina

Legend

Is this question bootstrap related?

If so I will leave it for someone else to help, if not then can you post a link to the live version of your site?

ReshlemanAuthor

Inspiring

Yes, bootstrap 4. The site is not live yet.

Nancy OShea

Community Expert

<img src="images/hero_image.jpg" alt="#" width="10048" height="4304" class="img-fluid"/>

That's an awfully big image!

This Carousel Template might be what you're looking for.

<!doctype html>

<head>

<title>Carousel Template for Bootstrap 4</title>

<style>

body {

padding-top: 3rem;

padding-bottom: 3rem;

color: #5a5a5a;

}

.carousel { margin-bottom: 4rem; }

.carousel-caption {

bottom: 3rem;

z-index: 10;

}

.carousel-item {

height: 32rem;

background-color: #777;

}

.carousel-item > img {

position: absolute;

top: 0;

left: 0;

min-width: 100%;

height: 32rem;

}

@media (min-width: 40em) {

.carousel-caption p {

margin-bottom: 1.25rem;

font-size: 1.25rem;

line-height: 1.4;

}

</style>

</head>

<body>

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#">Brand/Logo</a>

<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>

</ul>

</div>

</nav>

</header>

</ol>

<h1>Example headline.</h1>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>

</div>

<h1>Another example headline.</h1>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>

</div>

<h1>One more for good measure.</h1>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>

</div>

<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

</main>

</body>

</html>

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded