Help! Cross browser issues...

[kajDesign]

Hi,

I have a deadline to submit a web page by tomorrow, and I can't figure out why the site is not displaying correctly across multiple browsers/platforms. It is horizontally shifting some of the elements, which covers some of the content. This also happens when the browser is minimized. This is the fourth or fifth iteration of this site, so I've inherited a lot of the code, and it's turned into a bit of a mess.

Since the deadline is tomorrow, I can't start over, but am hoping there are some fixes that a more experienced coder has that I'm missing.

I am more of a graphic designer than a web designer, and a lot of my coding is amateur at best. I believe the issues are rooted in some of the elements being "absolute" positioned, but I don't know how to fix this problem, and keep the circles and the form hugging the edges of the site. Any suggestions and help is much appreciated!

URL: http://www.vehicleprojects.com/landing-page3/translation-services.html
CSS: http://www.vehicleprojects.com/landing-page3/css/ts3_style_a.css
A screenshot of how it should look:
http://www.vehicleprojects.com/landing-page3/images/screenshot1_FF.jpg

Thank you!

[awniyya1]

<a href="http://www.vehicleprojects.com/landing-page3/index.html"><img src="translation-services_files/logo_inverse.jpg" alt="" style="float: left; margin: 10px 20px 0px 300px;" height="45" width="307"></a> Use this part
and here is the changed CSS
/* CSS Document */
body {
padding: 0;
margin: 0;
background: #ffffff;
height: 100%;
}

#wrapper {
background: url(../images/hdr_lg.jpg) repeat-x;
width: 1024px;
display: block;
}

#page {
width: 1024px;
display: block;
}

p{margin:0px;
padding:0px;
}

img{border:0px;}
a:hover{text-decoration:none;}

h1 {
font: 62px Futura, Myriad Web, Verdana, Arial, Helvetica, sans-serif;
width: 500px;
letter-spacing: 0px;
color:#333333;
margin: 55px 0 25px 0;
}
h3 {
position: relative;
font: 30px Futura Bk, Verdana, Arial, Helvetica, sans-serif;
width: 500px;
letter-spacing: 0px;
color:#333333;
margin: 40px 0 0 50px;
z-index: 3;
}
h4 {
position: relative;
font: 18px Arial, Tahoma, Verdana, Helvetica, sans-serif;
width: 300px;
letter-spacing: 0px;
margin: 5px 0 0 50px;
z-index: 3;
}
h5 {
font: 24px Futura Bk, Verdana, Arial, Helvetica, sans-serif;
display:inline;
width: 200px;
letter-spacing: 0px;
color:#333333;
margin: 0px 0 0 0px;
}
.link
{
font:11 px Tahoma, Verdana, Arial, Helvetica, sans-serif;
color:#2D8DC6;;
text-decoration:none;
}

.link:hover
{
cursor:hand;
text-decoration:underline;
}
.img {
margin: 7px 0 0 0;
}
#main_block{
margin:auto;
width:1024px;
}
#innerblock{
float:left;
width:1024px;
background:none;
}

/* TOP PANEL STARTS HERE */

#top_panel{
float:left;
display:inline;
width:100%;
background-color :#263d81;
}

#header{
float: left;
display:inline;
background: url(../images/header.jpg)
width: 100%;
height:147px;
}

.tp_bg1{
float:left;
background:none;
width:100%;
height:75px;
display:inline;
margin: 0 0 0 0px;
}

.tp_nav{
float:right;
width:580px;
height:15px;
display:inline;
margin: -55px 0px 0 0px;
}

.menu{
float:left;
width:800px;
margin:0px 0 0 0px;
display:inline;
}
.menu a {
float:left;
text-align:center;
padding:0px 0 0 12px;
font: 14px Myriad Web, Arial, Helvetica, sans-serif, Tahoma;
color:#283D7C;
letter-spacing: 1px;
text-decoration:none;
margin:0 0 0 10px;
}
.menu a:hover {
float:left;
text-align:center;
padding:0px 0 0 12px;
font: 14px Myriad Web, Arial, Helvetica, sans-serif, Tahoma;
color:#666666;
letter-spacing: 1px;
text-decoration:none;
}

/* TOP PANEL ENDS HERE */


/* LEFT PANEL STARTS HERE */
.leftpanel{
float:left;
width:700px;
background: url(../images/callout4.jpg) no-repeat;
height:650px;
display:inline;
margin: 25px 0 0 300px;
padding: 0 0 0 0px;
}

.lp_bkg{
position: relative;
float:left;
height: 150px;
background:url(../images/quote_bkg.jpg) no-repeat;
margin:10px 0 0 -37px;
z-index: 8;
}
.lp_txt{
position: relative;
float:left;
font: 20px/24px Futura, Arial, Tahoma, Verdana, Arial, Helvetica, sans-serif;
width: 319px;
text-align:left;
color:#333333;
margin:10px 0 0 37px;
z-index: 8;
}
.lp_smltxt{
position: relative;
float:left;
font: 14px Futura, Arial, Tahoma, Verdana, Arial, Helvetica, sans-serif;
width: 319px;
text-align:right;
color:#333333;
margin:15px 0 0 0px;
z-index: 8;
}
#services {
position: absolute;
}
#services span {
display: block;
float: left;
}
.svc{
position:relative;
width:330px;
height:220px;
overflow:hidden;
}
.svc_box{
display: inline;
float: left;
padding:0px 0px 0 0;
margin:-85px 0 0px 675px;
}
.svc_txt{
float: left;
display: inline;
font: 16px/22px Arial, Tahoma, Verdana, Arial, Helvetica, sans-serif;
width: 325px;
color: #000;
text-align: left;
z-index: 8;
}


/* LEFT PANEL ENDS HERE */

/* RIGHT PANEL STARTS HERE */
#hang_tab{
position: absolute;
top: 35px;
left: 0px;
width: 208px;
height: 198px;
z-index: 10;
}
#rightpanel{
position: absolute;
width:300px;
height: 800px;
display:inline;
top:0px;
left:350px;
margin:0px 0 0 500px;
z-index: 10;
}

#form_bkg {
position: absolute;
width: 300px;
height: 800px;
z-index: 10;
margin: -100px 0 0 10px;
}

.rp_nav{
float:left;
display: inline;
width: 300px;
margin:0px 0 0 0px;
}
.rp_nav a {
float:left;
width: 315px;
height: 40px;
font: 16px Futura Bk, Futura, Myriad Web, Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
margin:0 0 0 0px;
padding:10px 0 0 20px;
}
.rp_nav a:hover {
float:left;
background:#333333;
width: 315px;
height: 40px;
font: 16px Futura Bk, Futura, Myriad Web, Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
margin: 0 0 0 -10px;
padding: 10px 0 0 10px;
}
.rp_hdr{
float:left;
font:18px Myriad Web, Arial, Helvetica, sans-serif, Tahoma;
width: 200px;
text-align:left;
color:#666666;
margin:20px 0 15px 20px;
}
.rp_smltxt{
float:left;
font:11px/14px Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-align:left;
color:#333333;
width:200px;
margin:15px 0px 0 20px;
}
.image
{
position: relative;
width: 100%; /* for IE 6 */
margin: 80px 0 0 0;
padding: 0 0 0 20px;
z-index: 11;
}

h2 {
position: relative;
font: 30px Myriad Web, Futura, Arial, Helvetica, sans-serif;
color: #ffffff;
margin: 0 0 0 20px; }

/* RIGHT PANEL ENDS HERE */

#form-request {overflow: hidden;
padding: 10px;
margin: 20px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 0 8px #efefef;
-moz-box-shadow: 0 0 8px #efefef;
box-shadow: 0 0 8px #efefef;}

.requestback{
margin: 0px 0 0 0;
}

.form .input-text {width: 220px;padding: 4px 5px;}

.form .input-text2 {width: 220px; height: 150px; padding: 4px 5px; margin: 0 0 0 22px;}

.form .input-select {width: 222px;padding: 3px 5px;}

.form .right {float: left;margin-left:2px;width: 230px;}

.form .privacy {font-size: 10px;line-height: 11px;background: url("../images/icon_lock.html") 0 0 no-repeat;text-indent: 20px;padding-top: 10px;margin: 0 5px 0 20px;}

#TB_window .form {padding: 0px;}

.topleft {float:left;margin-left:40px;width:610px;padding-right:40px; }

.top_thanks {float:left;margin-left:0px;width:610px;padding-right:10px; }

.input-text {background: #fff;
border: 1px solid #666;
margin: 0 0 11px 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}

.input-select {background: #fff;border: 1px solid #000;
margin: 0 0 11px 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}

label {color: #fff;
font: 12px Tahoma, Verdana, Arial Narrow, Arial, Helvetica, sans-serif;
display: block;
margin: 0px 0 3px 22px;}

.submit {background: url("../images/getquote.jpg") 0 0 no-repeat;width: 181px;height: 38px;float:left;border: 0;text-indent: -9999em;overflow: hidden;}

.button {background: url("../images/button.jpg") 0 0 no-repeat;
width: 149px;height: 45px;
font: 16px Future Bk, Futura, Myriad Web, Arial, Helvetica, sans-serif;
float:right;border: 0;
display: inline;
overflow: hidden;
padding: 0 0 5px 0;
margin: 12px 40px 0 0px;}

.button:hover {background: url("../images/button_dn.jpg") 0 0 no-repeat;
width: 149px;height: 45px;
color:#FFFFFF;
float:right;border: 0;
overflow: hidden;
margin: 12px 40px 0 0px;}

#l_box {
position: relative;
float:left;
font: 22px Futura, Arial, Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-align:left;
background: url(../images/ftr_bkg2.jpg) repeat-x bottom;
background-color:#d1d1d1;
height: 280px;
width:100%;
display:table;
margin:-250px 0 0 0px;
z-index: 1;
}
.lbox_title {
text-align:left;
display: block;
font: 22px Futura, Arial, Tahoma, Verdana, Arial, Helvetica, sans-serif;
width: 200px;
margin: 0 0 0 200px;
}
/* Slider*/
#box1{
position:absolute;
}
#box1 span{
display:block;
float:left;
}
.mask1{
position:relative;
width:330px;
height:220px;
overflow:hidden;
margin: 0 0 0 -200px;

}
.sample{
display: inline;
float: left;
padding:0px 0px 0 0;
margin:-5px 20px 0px 0px;
}

/* FOOTER STARTS HERE */

#footer{
margin: 0 auto;
width:100%;
display: table;
background:none;
}
#ftr_nav{
margin:auto;
width:1020px;
}
#ftr_inner{
float:left;
width:350px;
}
.ftr_lnks{
float: left;
display:inline;
margin:12px 0 10px 30px;
font:12px/15px Tahoma, Arial, Helvetica, sans-serif;
color:#666666;
}

.fp_txt{
float:left; margin:0px 0 0 0px;
font:12px/15px Tahoma, Arial, Helvetica, sans-serif;
color:#ffffff;
text-decoration:none; display:inline;
}

.fp_txt:hover{
float:left;
font:12px/15px Tahoma, Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-decoration:underline;
}
.fp_divi{
float:left; margin:0px 16px 0 16px;
font:11px/15px Arial; color:#CCCCCC;
display:inline;
}
.ft_cpy{
clear:left;
float:right;
text-align:right;
font: 11px Tahoma, Arial Narrow, Arial, Helvetica, sans-serif;
color:#ffffff;
margin:0px 10px 0px 0px;
text-decoration:none;
}
#ftrborderBlue {
float: left;
display:inline;
background:#213570;
width:1020px;
height: 15px;
}