astima
08 Mar 2010, 09:34 AM
I am trying to create a website where no matter the screen size table fills the entire height of the screen. I have an image filling the table, and if the if the if the image height is smaller than the screen height of the gray background color fills in below the picture. I want from the picture down, to be filled in with white. To give the illusion of three columns (gray, white with the table, gray). I can't seem to find a way to have the table extend all the way down. I hope this makes sense. Also on the contact page as well as the terms and conditions page a thin white line appears on the right side of the table. It happens when I export from Photoshop to Dreamweaver. The code is identical to the index page, and there is no line. So it must be something in Photoshop. Does anyone know how to fix this?
Here is the website: www.themessagetext.com
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Message Text</title>
<style type="text/css">
<!--
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #550459;
background: #383737;
font-family: "Times New Roman", Times, serif;
}
.oneColElsCtr #container {
width: 1024px;
background: #FFFFFF;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
height: 100%;
}
.oneColElsCtr #mainContent {
background-color: #FFF;
height: 100%;
color: #000;
}
.oneColElsCtr #container #mainContent table tr td #Table_01 tr td #web_registration_form #just_submit {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #550459;
background-image: url(images/websitenew-15.gif);
background-position: right top;
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
font-style: italic;
}
-->
</style>
</head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFFFFF" width="1024" height="100%"><table id="Table_01" width="1024" height="869" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8"><img src="images/websitenew.gif" width="1024" height="176" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2"><img src="images/websitenew-03.gif" width="112" height="393" alt=""></td>
<td colspan="2"><a href="#"> <img src="images/websitenew_03.gif" width="38" height="19" border="0" alt=""></a></td>
<td colspan="3" rowspan="2"><img src="images/websitenew-05.gif" width="874" height="393" alt=""></td>
</tr>
<tr>
<td colspan="2"><img src="images/websitenew-06.gif" width="38" height="374" alt=""></td>
</tr>
<tr>
<td rowspan="4"><img src="images/websitenew-07.gif" width="58" height="299" alt=""></td>
<td colspan="3"><a href="contact_us.html"> <img src="images/websitenew_07.gif" width="75" height="18" border="0" alt=""></a></td>
<td rowspan="2"><img src="images/websitenew-09.gif" width="17" height="39" alt=""></td>
<td><a href="terms_and_conditions.html"> <img src="images/websitenew_09.gif" width="170" height="18" border="0" alt=""></a></td>
<td colspan="2" rowspan="2"><img src="images/websitenew-11.gif" width="704" height="39" alt=""></td>
</tr>
<tr>
<td colspan="3"><img src="images/websitenew-12.gif" width="75" height="21" alt=""></td>
<td><img src="images/websitenew-13.gif" width="170" height="21" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img src="images/websitenew-14.gif" width="2" height="260" alt=""></td>
<td width="399" height="44" colspan="5" background="images/websitenew-15.gif" bgcolor="#FFFFFF" alt="">
<form id="web_registration_form" name="web_registration_form" method="post" action="http://platform.3cinteractive.com/web_registration.php">
<input id="username" name="username" type="hidden" value="VGn5S7PDQkBwb7csFvX2JA=="/>
<input id="password" name="password" type="hidden" value="ee7CQE1n8XALlcHYtpSV0Hm+lRNppZrVAe573Vysrq0="/>
<input id="trigger_id" name="trigger_id" type="hidden" value="77490" />
<input name="phone_number" id="phone_number" size="35" maxlength="10" />
<input id="just_submit" name="just_submit" type="submit" value="Submit" />
</form></td>
<td rowspan="2"><img src="images/websitenew-16.gif" width="565" height="260" alt=""></td>
</tr>
<tr>
<td colspan="5"><img src="images/websitenew-17.gif" width="399" height="216" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="58" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="52" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="17" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="170" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="139" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="565" height="1" alt=""></td>
</tr>
</table></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Here is the website: www.themessagetext.com
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Message Text</title>
<style type="text/css">
<!--
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #550459;
background: #383737;
font-family: "Times New Roman", Times, serif;
}
.oneColElsCtr #container {
width: 1024px;
background: #FFFFFF;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
height: 100%;
}
.oneColElsCtr #mainContent {
background-color: #FFF;
height: 100%;
color: #000;
}
.oneColElsCtr #container #mainContent table tr td #Table_01 tr td #web_registration_form #just_submit {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #550459;
background-image: url(images/websitenew-15.gif);
background-position: right top;
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
font-style: italic;
}
-->
</style>
</head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFFFFF" width="1024" height="100%"><table id="Table_01" width="1024" height="869" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8"><img src="images/websitenew.gif" width="1024" height="176" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2"><img src="images/websitenew-03.gif" width="112" height="393" alt=""></td>
<td colspan="2"><a href="#"> <img src="images/websitenew_03.gif" width="38" height="19" border="0" alt=""></a></td>
<td colspan="3" rowspan="2"><img src="images/websitenew-05.gif" width="874" height="393" alt=""></td>
</tr>
<tr>
<td colspan="2"><img src="images/websitenew-06.gif" width="38" height="374" alt=""></td>
</tr>
<tr>
<td rowspan="4"><img src="images/websitenew-07.gif" width="58" height="299" alt=""></td>
<td colspan="3"><a href="contact_us.html"> <img src="images/websitenew_07.gif" width="75" height="18" border="0" alt=""></a></td>
<td rowspan="2"><img src="images/websitenew-09.gif" width="17" height="39" alt=""></td>
<td><a href="terms_and_conditions.html"> <img src="images/websitenew_09.gif" width="170" height="18" border="0" alt=""></a></td>
<td colspan="2" rowspan="2"><img src="images/websitenew-11.gif" width="704" height="39" alt=""></td>
</tr>
<tr>
<td colspan="3"><img src="images/websitenew-12.gif" width="75" height="21" alt=""></td>
<td><img src="images/websitenew-13.gif" width="170" height="21" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img src="images/websitenew-14.gif" width="2" height="260" alt=""></td>
<td width="399" height="44" colspan="5" background="images/websitenew-15.gif" bgcolor="#FFFFFF" alt="">
<form id="web_registration_form" name="web_registration_form" method="post" action="http://platform.3cinteractive.com/web_registration.php">
<input id="username" name="username" type="hidden" value="VGn5S7PDQkBwb7csFvX2JA=="/>
<input id="password" name="password" type="hidden" value="ee7CQE1n8XALlcHYtpSV0Hm+lRNppZrVAe573Vysrq0="/>
<input id="trigger_id" name="trigger_id" type="hidden" value="77490" />
<input name="phone_number" id="phone_number" size="35" maxlength="10" />
<input id="just_submit" name="just_submit" type="submit" value="Submit" />
</form></td>
<td rowspan="2"><img src="images/websitenew-16.gif" width="565" height="260" alt=""></td>
</tr>
<tr>
<td colspan="5"><img src="images/websitenew-17.gif" width="399" height="216" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="58" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="52" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="17" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="170" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="139" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="565" height="1" alt=""></td>
</tr>
</table></td>
</tr>
</table>
</div>
</div>
</body>
</html>