Highlighted

Flexbox with IE11

Explorer ,
Apr 16, 2018

Copy link to clipboard

Copied

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%

}

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;

}

TOPICS
How to

Views

6.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Flexbox with IE11

Explorer ,
Apr 16, 2018

Copy link to clipboard

Copied

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%

}

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;

}

TOPICS
How to

Views

6.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 16, 2018 0
LEGEND ,
Apr 16, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 0
Explorer ,
Apr 16, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 0
Adobe Community Professional ,
Apr 16, 2018

Copy link to clipboard

Copied

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

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

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

<header>

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

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

<div class="collapse navbar-collapse" id="navbarCollapse">

<ul class="navbar-nav mr-auto">

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

<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>

<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>

<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>

<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>

</ul>

</div>

</nav>

</header>

<!--CACROUSEL-->

<main role="main">

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

<li data-target="#myCarousel" data-slide-to="1"></li>

<li data-target="#myCarousel" data-slide-to="2"></li>

</ol>

<div class="carousel-inner">

<div class="carousel-item active"> <img class="first-slide" src="https://placeimg.com/1500/200/nature" alt="First slide">

<div class="container">

<div class="carousel-caption text-left">

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

</div>

</div>

<div class="carousel-item"> <img class="second-slide" src="https://placeimg.com/1500/200/arch" alt="Second slide">

<div class="container">

<div class="carousel-caption">

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

</div>

</div>

<div class="carousel-item"> <img class="third-slide" src="https://placeimg.com/1500/200/tech" alt="Third slide">

<div class="container">

<div class="carousel-caption text-right">

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

</div>

</div>

</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>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Popper JS-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<!--latest Bootstrap 4 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 0
Explorer ,
Apr 16, 2018

Copy link to clipboard

Copied

Thanks for the response, Nancy. I haven't resized any images yet. I've attached a screenshot of what I'm going after. It works as designed in everything but IE. It appears as though the escape logo is throwing everything off, but I'm obviously no expert.

escape_snippet.PNG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 0
Adobe Community Professional ,
Apr 16, 2018

Copy link to clipboard

Copied

That's nothing complicated.  It's just  just 2 columns.

<div class="container"> 
<div class="row">
<div class="col-sm"> One of 2 columns </div>
<div class="col-sm"> Two of 2 columns </div>
</div>
</div>
Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 0
Explorer ,
Apr 16, 2018

Copy link to clipboard

Copied

Yes, the screenshot is of the code I pasted in a previous response on this thread. Sorry if I wasn't clear. I kind of asked two questions in one.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 0
Explorer ,
Apr 17, 2018

Copy link to clipboard

Copied

I was able to fix the second issue by removing the flexbox code and using mx-auto, and .text-center on the parent container. It's easy to overthink this stuff. Thank you all for the help.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 17, 2018 0
Mentor ,
Apr 16, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 0
LEGEND ,
Apr 16, 2018

Copy link to clipboard

Copied

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;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 0
Explorer ,
Apr 16, 2018

Copy link to clipboard

Copied

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.

<div class="container-fluid escape-container">

    <div class="row">

    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 meeting"><img src="images/meeting.jpg" alt="" width="7242" height="4833" class="img-fluid meeting d-md-block d-none"/></div>

        <div class="col-xl-6 col-lg-6 col-md-6 d-flex flex-column align-items-center"><img src="images/ESCAPE.Logo.jpg" alt=""width="50%" height="180px" class="img-fluid escape-logo"/>

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

    </div>

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

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 0