Internet Explorer 11/Windows 7 No Vertical Center?

HTML & CSS
1

On this page, scroll down to where you see ‘Contact Us’ on the left with a map on the right. Contact Us is not vertically centering.

Any reason why?

2

I may be missing something but you don’t have text-align:center so t’s not going to centre in any browser.

3

In what browser is it not vertically “middled”? Does the browser recognize flexbox? It looks vertically centered in Chrome.

:frog:

1 Like
4

As it does in Firefox.

5

Hard to believe that I’ve been awake for 3 hours and still can’t read big bold titles. Sorry 'bout asking which browser.

I believe IE11 does have a problem with flexbox and requires some awkward code to make it work (more divs, if I recall correctly). I do not have IE11 set up any more, so I cannot test. I’ll look for an example of an earlier test, but no promises.

6

For those who’ve not looked at the link too closely

As seen in Chrome:

824×640 66.8 KB

As seen in IE11:

834×649 54.9 KB

7

I’ve managed to use this:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 
.layout-5050-left .left {
        height: 600px
    }
    body.home .full-width .right {
        display: table;
    }
    body.home .full-width .right .content {
        display: table-cell;
        vertical-align: middle;
    }
}

This helps, but I was hoping for a more compatible ‘display: flex’ solution. Any other ideas?

8

Try this:

.layout-5050-left .left::before {
    content: "";
    display: inline-block;
    min-height: 600px;
    visibility: hidden;
}

Or use a fixed height for IE in the original rule.

Its a bug documented here.

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/101487/

Display table does this type of centering just as well as flexbox and works back to ie8 so no need to fork the code. I don’t see a need use to flexbox here anyway.:slight_smile:

1 Like
9

Thanks, PaulOB.

I was asked to ‘fix’ issues. The previous developer was using flex, but at least I know that IE just doesn’t care much for it and I will have to consider other workarounds.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.