0

Currently I got an overlay that is vertically centering everything inside of it. It works fine in modern browsers and all version of Internet Explorer down to IE8.

In IE7 this does not seem to be working. But after some research I found out that IE7 does not support display: table-cell;. So that is what's causing the issue.

However, I have no idea how I would fix this so that it also works in Internet Explorer 7.

Can anybody help me out on this?

CSS

body.noscroll {
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

div#overlay {
    z-index: 1000;
    position: fixed;
    display: table;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bd000000,endColorstr=#bd000000);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

div#overlay div#verticalCenter {
    display: table-cell;
    vertical-align: middle;
    padding: 15px;
}

HTML (simplified)

<body class="noscroll">
    <div id="overlay">
        <div id="verticalCenter">
            Test 1 2 3 4 5 6 7 8 9 10
        </div>
    </div>
</body>
Kid Diamond
  • 2,232
  • 8
  • 37
  • 79
  • Upgrade to a better IE... To be honest, IE 7 is very old and there are not many users on it anyways.. You should be more worried about what your site looks like on the up to date browsers like Chrome, Safari, Mozilla, and IE 10. Make the switch now and save a lot of pain and misery later. – BuddhistBeast Dec 08 '13 at 01:41
  • @BuddhistBeast Unfortunately it's not up to me to make those decisions. – Kid Diamond Dec 08 '13 at 10:13