Hi,

I am having terrible problems trying to get Internet Explorer to show my home page properly at http://www.npow.group.shef.ac.uk/

All other browsers show it as equal columns (3, 3 and 6) and they stretch and squeeze nicely on different browser sizes. However, on IE (certainly 10/11) the right hand column takes priority over the middle smaller column so they are not equal and the text disappears into the column.

I have searched and searched for answers and tried several CSS fixes including:

.vc_row.vc_row-o-equal-height>.span_12 >.vc_column_container>.vc_column-inner {
    width: 100%;
}

...but this didn't work. I am using the latest Salient 8.5.4 and WP 4.9.4. Is there something I am missing or is IE just the worst browser ever. I don't use it but unfortunately many others seem to like it.

Thanks in advance,

Lee

Hi,

I am testing in IE 10 and IE 11, both on different Windows computers. I use Mac with Safari, Chrome and Firefox and all is OK there but just not in IE.

Greetings.

Flex columns right now are a pain when rendered in IE 10/11.
You can try "cheating" with your CSS however it is a mixed bag of results.

Without getting into the "why" let's try adding this to your CSS Row/Column.

.col-row {  display: -webkit-flex;  display: flex;  display: -ms-flexbox;  }
.col { -ms-flex: 1 1 0px;  -webkit-flex: 1 1 0; flex: 1; min-height: 50px; width: 100%;  }

Thanks so much Oryan,

That has worked perfectly. Just for future reference, does that code that you sent me work for just my particular front page layout on that site or can I transfer it to any other pages with equal height columns?

Again, thanks very much - great service and great theme.

Lee