html - CSS FlexBox Not Centering Horizontally Within IE On vBulletin Forum -
i have attempted align 4 images/links using flexbox simple banner row. works fine within chrome , ff, within ie 11, flexbox seems fail images stack vertically rather horizontally.
you can view row of images here: http://bit.ly/1kz20hf
they near top reads, "popular rpf pulse posts:" notice how in ie, banners stop being aligned horizontally.
on local drive , on non vbulletin forum site there no issues within ie when test out banner code. wondering if dropping code within vbulletin framework causing issues ie 11. insights appreciated! thank you.
css banner row uses below:
.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 }
the transitional doctype causes ie edge emulate ie9 , unfortunately css flexbox
unsupported version.
Comments
Post a Comment