Here is my test page:
See attached screenshot. I am getting inconsistent placement of one of my elements (I added a red border around it for easier identification).
The element is <div id="contentwrapper"> and is styled like this:
margin:30% 0 0 -30em;
border:1px solid #c00
I'm sure the problem is the 30% margin-top.
The reason for the percentage is that we are trying to change the position of various elements over the background image, depending on the browser window's size and proportions. A percentage seemed to be the way to go.
It basically works the way we want, however with Safari is much higher up than in any other browser. All others appear to be about the same (including IE).
I'm not sure I understand 100% how a percentage in margin-top is supposed to work. Is there something I can modify in my CSS that will make this more consistent? Or is this an inherent browser inconsistency problem that I will need to find a workaround for?