CODEWITHSUNDEEP
cssinternet-explorer-9positioncenter
Kayote
Kayote

Reputation: 15637

IE9 CSS center positioning

Please refer to the jsfiddle for example.

I am trying to render a popup message which should appear in the centre of the screen.

Problem: IE9 renders it on the left hand side, IE8 renders correct in the centre, Chrome & Firefox are happy displaying in the centre as well.

CSS code of the element (.cPUParent):

.cPUParent {
  position: absolute;
  bottom: 20px;
  left: 5px;
  right: 0;
  width: auto;
  max-width: 187px;
  height: auto;
  padding: 5px 10px 0 15px;
  border: 2px solid #571C54;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgb(109,49,107);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";    /* opacity in IE 8 */
  filter: alpha(opacity=0);  /* opacity in IE 5-7 */
  opacity: 0;
  z-index: 0;
}

Upvotes: 0

Views: 1586

Answers (2)

Arathol
Arathol

Reputation: 43

What you have to consider is the height and the width of the object. If you can set a fixed width, then its quite easy. Here is the solution which works on ie8 and 9.

    .cPUParent {
        position: absolute;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: 100px;
        height: 100px;
        margin-left: -64.5px;
        margin-top: -54.5px;

        padding: 5px 10px 0 15px;
        border: 2px solid #571C54;
        border-radius: 5px;
        background-color: #6D316B;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        z-index: 999;
    }

To explain: If you can set the height and width (100px in this example) then you need to push it 50% in from the left of the screen border and from the top 50%.

        top: 50%;
        left: 50%;

When you do this, it sets the box's top left corner on that 50%/50% point so you then need to pull it up and left a little (half the height and width of the box). (consider the box model when working this out. The padding and border all add to the width and height of the object)

        margin-left: -64.5px;
        margin-top: -54.5px;

The bottom and right values should be reset to auto just incase there are other cascading styles being applied to it

        right: auto;
        bottom: auto;

The rest of the code is your original styles:

        padding: 5px 10px 0 15px;
        border: 2px solid #571C54;
        border-radius: 5px;
        background-color: #6D316B;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        z-index: 999;

Dont forget that you wont see anything at the moment because you have opacity set to 0 (ZERO).

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;

And that should do it.

Upvotes: 1

Chris Lewis
Chris Lewis

Reputation: 1325

Changing 'max-width' to 'width' in the .cPUParent class makes it work in IE9:

http://jsfiddle.net/rLwvP/

.cPUParent {
  width: 187px;
}

Upvotes: 1

Related Questions