CODEWITHSUNDEEP
htmlcssinternet-explorer-7internet-explorer-6
Thomas
Thomas

Reputation: 829

IE7 unable to offset with a margin

Would anyone be able to tell me why my following code doesn't centre the "block" on the "pivot" in IE7?

Instead it seems to half the size of the "block" for those browsers.

<style>
.pivot {
   position: absolute;
   top: 50%;
   left: 50%;
}
.block {
   height: 200px;
   width: 200px;

   margin-left: -50%;
   margin-top: -50%;

   background-color: green;
}
</style>

<div class="pivot">
<div class="block"></div>
</div> <!-- end pivot -->

EDIT

To get this to work I used Erics code for IE6-IE-7 hacked into my margin approach for all other browsers

Upvotes: 0

Views: 315

Answers (3)

Eric
Eric

Reputation: 97591

Normally the done thing is to use relative positioning:

<style>
.pivot {
   position: absolute;
   top: 50%;
   left: 50%;
}
.block {
   height: 200px;
   width: 200px;

   position: relative;
   left: -50%;
   top: -50%;

   background-color: green;
}
</style>

<div class="pivot">
    <div class="block"></div>
</div>

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

Is this not an option for you?

.pivot {
    text-align: center;
}
.block {
    display: inline-block;
    text-align: left;
}

Upvotes: 0

Alon
Alon

Reputation: 879

Something in your code is wrong, try giving to pivot width and height and it wont work in any browser.

If you want to center an element in the center of the screen you should do something like that:

#element {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
background-color: green;
}

And it will work in all browsers, including IE6-7.

Upvotes: 1

Related Questions