1

First off, this is probably happening in older versions of IE too but I only have 11 to hand for testing at the moment!

I have used display: flex in a 3 column setup, so that the buttons at the bottom of each column line up vertically; important as the lengths of the text above them vary quite a lot.

This is working absolutely fine in Chrome, Firefox, Safari (on MacOS and iOS) and on Android devices, but on IE 11 it randomly adds a massive gap between the images at the top of each column, and the text & button below. I'm aware that flex is a bit buggy in IE but I haven't found anything online about this specific issue. It's odd as the alignment side of things is working, but this random gap in each column needs to go.

HTML:

<div class="row">

<div class="flex_col_1_of_3">
IMAGE 1 GOES HERE
<h3><a href=“/link”>TITLE 1 GOES HERE</a></h3>
<p>MAIN TEXT GOES HERE.<br>
<a style="display:block" href=“/LINK”><div class="button">Read More ></div></a></div>

<div class="flex_col_2_of_3">
IMAGE 2 GOES HERE
<h3><a href=“/link”>TITLE 2 GOES HERE</a></h3>
<p>MAIN TEXT GOES HERE.<br>
<a style="display:block" href=“/LINK”><div class="button">Read More ></div></a></div>

<div class="flex_col_2_of_3">
IMAGE 3 GOES HERE
<h3><a href=“/link”>TITLE 3 GOES HERE</a></h3>
<p>MAIN TEXT GOES HERE.<br>
<a style="display:block" href=“/LINK”><div class="button">Read More ></div></a></div>

CSS:

.row {
display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    display: flex;            
width: 100%;
margin: auto;
padding-bottom: 20px;
}

.flex_col_1_of_3, .flex_col_2_of_3 {
width: 32%;
text-align: center;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
    display: flex;     
flex-direction: column;
}
.flex_col_2_of_3 {
margin-left: 2%;
}

Does anyone have any advice as to how to avoid this issue please? Thanks!

SRD
  • 29
  • 1
  • 3
  • Try wrapping the images in a div...that's likely the issue. Images as flex-children tend to be.... *awkward*. – Paulie_D Dec 16 '16 at 12:52
  • And try to avoid using percentage margins on flex items: http://stackoverflow.com/a/36783414/3597276 – Michael Benjamin Dec 16 '16 at 12:54
  • Are you using `` in your HTML? if not try it in your head tag – Raymond Nijland Dec 16 '16 at 12:56
  • Thanks so much for your replies, everyone. I've tried all the suggestions but they weren't working - however, following Paulie_D's comment, I've just found that if the images are just the backgrounds of the divs, the gap disappears. Fingers crossed this works.... – SRD Dec 16 '16 at 14:47
  • There's also no practical reason to use `-moz-flex`, `-o-flex`, or `-ms-flexbox` unless you are specifically targeting very old browsers. – TylerH Dec 16 '16 at 17:08

0 Answers0