You have a containing div #maincontent with an image and a form layered over it. The image is 650px wide x 608px high but the #maincontent is 80% wide x 608px high, so the width will vary depending on what screen resolution the viewer is using and the image will change its position, sometimes the image 650px will be more than 80% so it will start at the left side of #maincontent but sometimes in a large screen resolution the 80% will be more than 650px so the image will move away from the left edge of #maincontent and centralise because of the text-align: center; which will alter the position of the form over it.
I suggest that you make the #maincontent 650px wide to match the image inside and make it position: relative and delete the left: 186px. This will make #maincontent the same width as the image and will centralise both in any screen resolution.
The form elements then need to be repositioned.
#maincontent { position: relative;
/*left:186px;*/
top:27px;
width:650px;/*was 80%;*/
height:608px;
z-index:1;
margin: 0 auto;
background-repeat: no-repeat;
background-position: center center;
position: relative;
text-align: center;
}
#Name {
position:absolute;
left:312px;/*was 372px;*/
top:80px;/*was 95px;*/
z-index:1;
}
#Email {
position:absolute;
left:312px;/*was 372px;*/
top:125px;/*was 140px;*/
z-index:1;
}
#Phone {
position:absolute;
left:312px;/*was 372px;*/
top:170px;/*was 185px;*/
z-index:1;
}
.fontfields {
font-size: 24px;
}
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.