CODEWITHSUNDEEP
htmlcss
sweaty
sweaty

Reputation: 389

CSS Div to Display in Center of Screen regardless of browser

I am attempting to make a div show up over the current content of a page centered on a page. It works beautifully in Chrome, but when I test against older versions of IE (8) the top left corner is showing up in the center of the screen, not the center of the div in the center of the screen. Any idea what is wrong with my CSS causing IE to put the top left in the middle of the screen?

I have tried changing any number of the variables, but that causes it to fail in Chrome.

.PopupPanel
{
    border: solid 2px black;
    position: fixed;
    background-color:#FFFFFF;
    z-index: 100000;
    border-radius: 10px;
    padding:10px;
    overflow: auto;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 90%;
    height: 90%;
    box-shadow: 10px 10px 5px #888888;
}
.......
<div class="PopupPanel" id="sr_compose_popup" name="sr_compose_popup" style="display:none;">
    <input type="button" value="Close" onclick="close_pop_up_window();">
    <hr>
    <div id="div_popup_below_line"></div>
</div>

Upvotes: 1

Views: 108

Answers (2)

Stickers
Stickers

Reputation: 78786

Because IE8 does not understand CSS transform. You could use this trick for positioned element instead, which should work well on older browsers too.

.PopupPanel{
    border: solid 2px black;
    position: fixed;
    background-color:#FFFFFF;
    z-index: 100000;
    border-radius: 10px;
    padding:10px;
    overflow: auto;

    margin: auto; /*new*/
    left: 0; right: 0; top: 0; bottom: 0; /*new*/

    width: 90%;
    height: 90%;
    box-shadow: 10px 10px 5px #888888;
}

http://jsfiddle.net/12t5gh42/

Upvotes: 3

Sudip
Sudip

Reputation: 2051

Add a new CSS file for IE 8 version only, copy the same CSS name and modify it accordingly. Add the file in your html page inside the comment tag. like

<!--[if lte IE 8]>

<![endif]-->

Upvotes: 1

Related Questions