Absolute positioned element displays in different position in safari compared to IE8

For www.zabb.co.uk/test2b.html the displayDiv displays higher开发者_开发技巧 up in IE8 than in Safari. How can I make it so they display in exactly the same vertical position? Thanks in advance.

The element is positioned top: 50%, meaning that the top of the box is positioned half way down the visible area of the window (the 'viewport') when the page loads.

This is a fairly standard bit of CSS, and should work fine in both browsers.

However, because the position is based on the size of the visible browser window size, the exact position will vary in different browsers, even if you have them both maximized on the same screen, because the two browsers will use different amounts of space for their toolbars, etc, and thus their browser viewports will differ in size.

This is most likely reason for what you're seeing: the browsers are both working fine; they're just following the same instruction differently because their viewports are different sizes.

You'll also notice the same effect if you change the size of the browser window, and this also means that users with different screen resolutions to yours will see it differently, even in the same browser.

There's nothing intrinsically wrong with this effect -- if you are trying to position something to 50%, then it will naturally be in a different position according to the size of the window it's in. This may actually be a good thing, as it means you can ensure it is visible and centered for all users, no matter what their screen size.

However, if you do want to prevent this effect, I would suggest using a fixed pixel value for the top style, rather than a percentage.

If you want to position it absolute, but positioned in relation to the whole page rather than the window size, then you need to make an element outside of it (possibly your body element) position:relative;. It will then measure the absolute position of your box against that rather than against the viewport.

Hope that helps.

I haven't examined your page, so while there may be problems with the css, I suspect the two browsers are just different.

I would suggest one of these:

1) Design your page so you don't require a certain element to be an exact absolute position (use more relative positioning)

2) Use conditional comments to add a wrapper class to your page and write a new css rule to adjust the div, e.g.

.ie8 #myAbsoluteDiv {
    top: /* something different from safari */
}