Website not displaying correctly...

jeffwit

05-06-2010, 11:44 PM

Hello! I am new here and would like to say hello to everyone and thank you in advance for helping me with my inquiry. I have minor experience designing websites and seem to have run into an issue that I need to resolve.

Here is the website:

http://test.foxwyn.net/valvetek/index.html

The site looks perfect on the monitor that was used to design the site, but I am taking a look at it on a different computer and it is not displaying correctly at all.

The page should be centered on the content but instead looks like this:

http://i44.tinypic.com/a40byc.jpg

Here is the HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hydrant and Valve Water System Services from Valvetek – New Jersey and New York Area</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/valvetek.css" rel="stylesheet" rev="stylesheet" />
<script language="javascript">
function valid()
{
if(document.contactform2.name.value=="")
{
alert("Please Enter Name");
document.contactform2.name.focus();
return false;
}

if(document.contactform2.email.value=="")
{
alert("Please enter your email");
document.contactform2.email.focus();
return false;
}

if(document.contactform2.email.value.indexOf("@")==-1||document.contactform2.email.value.indexOf(".")==-1)
{
alert("Please enter a valid email address");
document.contactform2.email.focus();
return false;
}

if(document.contactform2.comment.value=="")
{
alert("Please enter a message");
document.contactform2.comment.focus();
return false;
}

}
</script>
</head>

<body>
<div id="main">
<div id="left"></div>
<div id="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>
<td width="977" height="106" background="images/header_bg.jpg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="375"><a href="index.html"><img src="images/valvetek-utility-services-logo.jpg" alt="Valvetek Utility Services, Inc." width="375" height="102" border="0"></a></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="79%"><div id="phone"><span class="phonenumber">1-800-717-0974</span></div></td>
<td width="15%"><div align="right"><img src="images/american-water-works-association.jpg" alt="American Water Works Association" width="58" height="77"></div></td>
<td width="6%"> </td>

</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td width="977" height="13" background="images/bar.jpg"></td>
</tr>
<tr>
<td width="977" height="279"> <div id="maincontent">
<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>
<td width="97%"> </td>
<td width="3%"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>

<td> </td>
</tr>
<tr>
<td height="48"> <div align="right"><span class="homeheader">Maintaining
America’s Infrastructure</span></div></td>
<td> </td>
</tr>
<tr>
<td><div align="right"><h1><strong>ValveTek
Utility Services, Inc.</strong> has provided professional,
dependable<br>

maintenance and support programs to the water utility industry
since 1949.<br>
From <strong>hydrant and valve services</strong> to <strong>water
system asset mapping</strong> to <strong>engineering</strong>
<br>
<strong>programs</strong>, ValveTek provides unparalled service
for <strong>water transmission</strong><br>

<strong>and distribution systems</strong> with a highly-trained
team outfitted<br>
with state-of-the-art utility service equipment.</h1></div></td>
<td> </td>
</tr>
</table>
</div></td>
</tr>

<tr>
<td> <div id="boxholder">
<div id="box"><img src="images/Water-Distribution-Valve-Service.jpg" alt="Water Distribution Valve Service" width="163" height="66"></div>
<div id="box"><img src="images/Fire-Hydrant-Maintenance-Repair-and-Flushing.jpg" alt="Fire Hydrant Maintenance Repair and Flushing" width="162" height="66"></div>
<div id="box"><img src="images/Water-Service-and-Curb-Box-Repairs-and-Replacements.jpg" alt="Water Service and Curb Box Repairs and Replacements" width="162" height="66"></div>
<div id="box"><img src="images/Water-System-Asset-GPS-Survey-Programs.jpg" alt="Water System Asset GPS Survey Programs" width="162" height="66"></div>
<div id="box"><img src="images/Water-System-Leak-Detection-Services.jpg" alt="Water System Leak Detection Services" width="162" height="66"></div>
<div id="box2"><img src="images/Water-System-Asset-Maintenance-Administration.jpg" alt="Water System Asset Maintenance Administration" width="161" height="66"></div>
</div>

<div id="boxholder2">
<div id="box3">
<div id="boxformat">
<h2><a href="Water-Distribution-Valve-Service.html" title="Water Distribution Valve Service">Water
Distribution<br>
Valve Service</a></h2>
</div>
</div>
<div id="box3">
<div id="boxformat">
<h2><a href="#" title="Fire Hydrant Maintenance Repair and Flushing">Fire Hydrant Maintenance,<br>

Repair and Flushing</a></h2>
</div>
</div>
<div id="box3">
<div id="boxformat">
<h2><a href="#" title="Water Service and Curb Box Repairs and Replacements">Water Service and Curb Box<br>
Repairs and Replacements</a></h2>
</div>

</div>
<div id="box3">
<div id="boxformat">
<h2><a href="#" title="Water System Asset GPS Survey Programs">Water System Asset<br>
GPS Survey Programs</a></h2>
</div>
</div>
<div id="box3">
<div id="boxformat">
<h2><a href="#" title="Water System Leak Detection Services">Water System Leak<br>

Detection Services</a></h2>
</div>
</div>
<div id="box4">
<div id="boxformat">
<h2><a href="#" title="Water System Asset Maintenance Administration">Water System Asset<br>
Maintenance Administration</a></h2>
</div>

</div>
</div></td>
</tr>
<tr>
<td> <div id="valvetekcontact">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="contactbox">Contact ValveTek Utility Services Today!</div></td>
</tr>

<tr>

<td height="9" ></td>
</tr>
<tr>
<td><div id="contactform">
<form name="contactform2" method="post" onsubmit="return valid();" action="contact_form.php">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="42%" border="0" cellspacing="0" cellpadding="0">

<tr>
<td width="12%"><span class="contactformtext">Name:</span></td>
<td width="34%"> <input name="name" type="text" id="name" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 7pt; BORDER-LEFT: #000000 1px solid; COLOR: #000080; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: Calibri; BACKGROUND-COLOR: #FFFCDC" >
</td>
<td width="17%"><span class="contactformtext">Company:</span></td>
<td width="39%"> <input name="company" type="text" id="company" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 7pt; BORDER-LEFT: #000000 1px solid; COLOR: #000080; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: Calibri; BACKGROUND-COLOR: #FFFCDC" >
</tr>
<tr>
<td width="12%" height="5"></td>

<td width="34%" height="5"></td>
<td width="17%" height="5"></td>
<td width="39%" height="5"></td>
</tr>
<tr>
<td width="12%"><span class="contactformtext">Email:</span></td>
<td width="34%"> <input name="email" type="text" id="email" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 7pt; BORDER-LEFT: #000000 1px solid; COLOR: #000080; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: Calibri; BACKGROUND-COLOR: #FFFCDC" >
</td>
<td width="17%"><span class="contactformtext">Phone:</span></td>

<td width="39%"> <input name="phone" type="text" id="name3" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 7pt; BORDER-LEFT: #000000 1px solid; COLOR: #000080; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: Calibri; BACKGROUND-COLOR: #FFFCDC" >
</tr>
<tr>
<td width="12%" height="5"></td>
<td width="34%" height="5"></td>
<td width="17%" height="8"></td>
<td width="39%" height="5"></td>
</tr>
</table></td>

</tr>
<tr>
<td><span class="contactformtext">Requesting more information
about...</span></td>
</tr>
<tr>
<td height="5" ></td>
</tr>

<tr>
<td><table width="44%" border="0" cellspacing="0" cellpadding="0">

<tr>
<td height="25">
<div align="left">
<input type="checkbox" name="checkbox1" value="Valve Service">
</div></td>
<td width="19%"><span class="contactformtext">Valve
Service</span></td>
<td> <input type="checkbox" name="checkbox2" value="Service/Curb Box Maintenance">
</td>
<td width="38%"><span class="contactformtext">Service/Curb
Box Maintenance </span></td>

<td> <input type="checkbox" name="checkbox3" value="Leak Detection">
</td>
<td width="28%"><span class="contactformtext">Leak
Detection</span></td>
</tr>
<tr>
<td> <div align="left">
<input type="checkbox" name="checkbox4" value="Hydrant Service">
</div></td>
<td width="19%"><span class="contactformtext">Hydrant
Service </span></td>

<td> <input type="checkbox" name="checkbox5" value="Engineering Services">
</td>
<td width="38%"><span class="contactformtext">Engineering
Services </span></td>
<td> <input type="checkbox" name="checkbox6" value="GPS Surveys">
</td>
<td width="28%"><span class="contactformtext">GPS
Surveys</span></td>
</tr>
<tr>
<td width="5%" height="5"></td>

<td width="19%"></td>
<td width="5%"></td>
<td width="38%"></td>
<td width="5%"></td>
<td width="28%"></td>
</tr>
</table></td>
</tr>
<tr>

<td><textarea name="comment" cols="44" rows="1"></textarea></td>
</tr>
<tr>
<td> <input type="submit" name="button" class="button" value="Send" onclick="return valid();" /></td>
</tr>
</table>

</form>

</div></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td><div id="footer">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td height="10"></td>
</tr>

<tr>
<td><div id="copyright">© 2010 VALVETEK Utility Services, Inc.</div>
<div id="links"><span class="linktext"><a href="#">About ValveTek</a> | <a href="#">Sitemap</a></span></div></td>

</tr>
</table>

</div></td>
</tr>
</table>
</div>
<div id="right"></div>
</div>
</div>

</body>
</html>

jeffwit

05-06-2010, 11:45 PM

Here is the CSS:

* { margin: 0; padding: 0; }

html { min-height: 100%; margin-bottom: 1px; }

html { overflow: -moz-scrollbars-vertical !important; }

body {
text-align: center;
margin: 0px;
padding: 0px;
background-attachment: fixed;
background-repeat: repeat;
background-position: center center;
background-color: #000000;
background-image: url(../images/main_bg2.jpg);

}

#main {
text-align: left;
margin: 0 auto;
padding: 0px;
width: 1135px;
background-image: url(../images/main_bg.jpg);
background-repeat: repeat-y;
height: 690px;

}
#left {
float: left;
width: 79px;
height: 785px;
background-image: url(../images/left_bg.jpg);
margin: 0px;
padding: 0px;

}
#right {
float: left;
width: 79px;
height: 785px;
background-image: url(../images/right_bg.jpg);
margin: 0px;
padding: 0px;

}
#center {
width: 976px;
height: 690px;
margin: 0px;
padding: 0px;
vertical-align: top;
float: left;

}
#header {
background-image: url(../images/header_bg.jpg);
width: 976px;
height: 106px;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
float: left;

}
#logo {
background-color: #FFFFFF;
width: 375px;
height: 106px;
float: left;
margin: 0px;
padding: 0px;

}
#rightheader {
float: left;
height: 106px;
width: 602px;
margin: 0px;
padding: 0px;

}
#phone {
text-align: right;
padding: 0px;
margin: 0px;

}

#aww {
float: left;
width: 58px;
margin-left: 20px;
margin-top: 0px;
height: 77px;
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;

}
#content {
background-color: #FFFFFF;
width: 976px;
margin: 0px;
padding: 0px;
float: left;
height: 13px;

}
#bar {
background-image: url(../images/bar.jpg);
height: 12px;
width: 976px;
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
float: left;

}
#maincontent {
width: 976px;
background-image: url(../images/content_bg.jpg);
background-repeat: no-repeat;
height: 279px;
margin: 0px;
padding: 0px;
text-align: right;

}
#contenttext {
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-top: 0px;

}

#box {
background-image: url(../images/box_bg.jpg);
margin: 0px;
padding: 0px;
float: left;
height: 66px;
width: 163px;
}
#box2 {
background-image: url(../images/box_bg.jpg);
margin: 0px;
padding: 0px;
float: left;
height: 66px;
width: 161px;
}
#boxholder {
margin: 0px;
padding: 0px;
width: 976px;

}
#boxholder2 {

margin: 0px;
padding: 0px;
height: 37px;
width: 976px;
}
#box3 {

background-image: url(../images/box_bg2.jpg);
margin: 0px;
padding: 0px;
float: left;
height: 37px;
width: 163px;
}
#box4 {

background-image: url(../images/box_bg2.jpg);
margin: 0px;
padding: 0px;
float: left;
height: 37px;
width: 161px;
}
.boxtext {
color: #FFEAB8;
font-family: Calibri;
font-size: 12px;
font-weight: bold;
margin: 0px;
padding: 0px;

}
#boxformat {
padding: 0px;
margin-top: 4px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 8px;
position: static;

}
#valvetekcontact {
background-image: url(../images/valvetek-contactform.jpg);
height: 237px;
width: 976px;
margin: 0px;
padding: 0px;
background-repeat: no-repeat;

}
#footer {
margin: 0px;
padding: 0px;
background-image: url(../images/footer.jpg);
height: 46px;
width: 976px;
background-repeat: no-repeat;
text-align: center;

}
#copyright {
font-family: Calibri;
font-size: 14px;
color: #FFFFFF;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
letter-spacing: 1px;
float: left;
margin-left: 30px;

}
#links {
padding: 0px;
margin-top: 0px;
margin-right: 30px;
margin-bottom: 0px;
margin-left: 0px;
float: right;

}

#contactbox {
font-family: Calibri;
font-size: 16px;
font-weight: bold;
color: #002041;
padding: 0px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 60px;
}
#contactform {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 60px;
}
.contactformtext {
font-family: Calibri;
font-size: 11px;
color: #3F4D59;
margin: 0px;
padding: 0px;

}

table {
margin: 0px;
padding: 0px;
position: static;

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

.button {
border: 1px solid #006;
background: #002346;
font-family: Calibri;
font-size: 13px;
color: #FFFFFF;
letter-spacing: 1px;
height: 20px;
width: 60px;
text-align: center;
padding: 0px;
margin-top: 8px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 310px;

}
.thankyoutext {
font-family: Calibri;
font-size: 13px;
color: #002041;
}
h2 a {
color: #FFEAB8;
font-family: Calibri;
font-size: 12px;
font-weight: bold;
margin: 0px;
padding: 0px;
text-decoration: none;

}
h2 a:hover {

color: #FFEAB8;
font-family: Calibri;
font-size: 12px;
font-weight: bold;
margin: 0px;
padding: 0px;
text-decoration: underline;
}

.phonenumber {
font-family: Calibri;
font-size: 32px;
font-weight: bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
letter-spacing: 1px;
font-style: normal;
line-height: normal;
font-variant: normal;
text-transform: none;
}

.homeheader {
font-size: 32px;
color: #003366;
font-family: Calibri;
font-weight: bold;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;

}

.hometext {
margin: 0px;
padding: 0px;
color: #3F4D59;
font-family: Calibri;
font-size: 16px;

}

.linktext {
font-family: Calibri;
font-size: 14px;
color: #FFFFFF;
padding: 0px;
letter-spacing: 1px;
margin: 0px;
text-decoration: none;

}
.linktext a {
font-family: Calibri;
font-size: 14px;
color: #FFFFFF;
padding: 0px;
letter-spacing: 1px;
margin: 0px;
text-decoration: none;

}
.linktext a:hover {
font-family: Calibri;
font-size: 14px;
color: #FFFFFF;
padding: 0px;
letter-spacing: 1px;
margin: 0px;
text-decoration: underline;

}
h1 {
margin: 0px;
padding: 0px;
color: #3F4D59;
font-family: Calibri;
font-size: 16px;
font-weight: normal;

}
h2 {

color: #FFEAB8;
font-family: Calibri;
font-size: 12px;
font-weight: bold;
margin: 0px;
padding: 0px;
}#innerleft {
margin: 0px;
padding: 0px;
float: left;
height: 818px;
width: 486px;
}
#innerright {
margin: 0px;
padding: 0px;
float: left;
height: 818px;
width: 490px;
background-color: #FFFFFF;
background-image: url(../images/right_inner.jpg);

}
#contactbox2 {

font-family: Calibri;
font-size: 16px;
font-weight: bold;
color: #002041;
padding: 0px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 60px;
}
#innercontact {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 60px;
width: 400px;

}
#contentright {
padding: 0px;
margin-top: 40px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 25px;

}
.innerheader {

font-family: Calibri;
font-size: 24px;
font-weight: bold;
color: #002041;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#innertext {
padding: 0px;
margin: 0px;
width: 445px;

}
p {
margin: 10px 0px 0px;
padding: 0px;
}
.innerh2 {
font-family: Calibri;
font-size: 16px;
color: #002041;
}
.innercontent {

font-family: Calibri;
font-size: 14px;
font-weight: bold;
color: #3F4D59;
padding: 0px;
line-height: 24px;
margin: 0px;
width: 445px;
}

jeffwit

05-06-2010, 11:51 PM

And here is how it should look:

http://i44.tinypic.com/t0spl1.jpg

ACreed

05-07-2010, 12:12 AM

Unless I am missing something, you can't center the site if the site is bigger than the resolution. Your only option is to redesign the site to fit (what looks to be 1024x768). Personally I think its fine, since I use 1280x1024 resolution for a standard for my sites. I am personally running 1920x1200.

abduraooft

05-07-2010, 07:59 AM

Hi there,

Here are some tips, which would help you to make a better markup.

1) Use a complete DOCTYPE (http://www.alistapart.com/articles/doctype/) at the top and I'd recommend HTML-Strict.

2) Never use tables for making the layout (http://www.hotdesign.com/seybold/). They should be used only for displaying tabular data.

3) Make sure that you are using valud markup to make your document. A valid markup is essential to get the expected output. See the errors in your current markup at http://validator.w3.org/check?uri=http://test.foxwyn.net/valvetek/index.html