Image is Correct CSS dimensions for Resolution but won't display properly in browsers
I have a set-up for a webpage layout and I did it for the dimensions 1920x1200 screen resolution.
The proper page display was designed to look like this:
http://cl.ly/3Q0I2R0q0q1E3v230k3w
Unfortunately, the rendering seems to look more like this (in every browser, not just IE, image viewed via web expression super preview): http://cl.ly/0Z2K3s3Q462s163v0303
Here's the CSS for the div tag for these:
#gsquare
{
width: 1366px;
height: 927px;
position: absolute;
top: 14%;
left: 15%;
background-image: url("../images/1920x1200/gradientsquare.png");
background-repeat: no-repeat;
z-index: 15;
}
#wsquare
{
width: 1326px;
height: 900px;
position: absolute;
top: 1.5%;
left: 1.5%;
background-image: url("../images/1920x1200/whitesquare.png");
background-repeat: no-repeat;开发者_JAVA百科
}
The top and bottom gradient backgrounds have a pixel height of 171px each. The center gradient square is set to 1366x927, the white square 1326x900, so on and so forth. Those numbers do mathematically add up from what I'm seeing, so I don't understand what's happening here. Also, I cannot use CSS3 for this site as most of the selectors in CSS3 are still in WD status. It isn't allowed.
Any advise on this issue would be greatly appreciated. Please elaborate on your explanations with code as the visual aids are extremely helpful in these cases.
I looked at both of your images and it seems like you can simply change the positioning a bit more to get the desired result. Without having the code to look at though (including image and all supporting markup) it is difficult to say for certain what the problem is.
You do realize though that starting from:
position: absolute;
top: 14%;
left: 14%;
versus
position: absolute;
top: 1.5%;
left: 1.5%;
is different in terms of placement from the top. 15% down versus 1.5% down will yield two different starting points and so you will have to adjust for that in your calculations.
精彩评论