I've been working on aligning four images/links using Flexbox for a basic banner row. It's working smoothly in Chrome and Firefox, but in IE 11, the Flexbox is not behaving as expected, causing the images to stack vertically instead of horizontally.
You can see the row of images here:
If you look near the top where it says, "Popular RPF Pulse Posts:", you'll notice the issue with the alignment in IE. Interestingly, when testing the banner code on my local drive or on a non vBulletin forum site, IE 11 works fine. This makes me wonder if the problem lies within the vBulletin framework. Any insights on this would be highly appreciated! Thank you.
Below is the CSS code used for the banner row:
.sgFlexBox {
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
}
.sgFlexItemFooter {
width: 205px;
height: auto;
margin: 0 12px 15px 12px;
text-align: center;
}
.rpfPostLink {
color: #FFF;
font: bold 15px/21px Arial;
text-align: center;
border: 0;
}
.sgFlexIcon {
display: block;
margin: 0 auto 10px auto;
position: relative;
vertical-align: bottom;
border: 2px solid #d2d2d2;
}
#sgCenterTitle {
color: #FFF;
font: bold 18px/18px Arial;
text-align: center;
padding: 15px 0 10px 0
}