a quick alignment issue [Archive]

canadianjameson

12-09-2005, 04:41 PM

the mainCell on this page is getting shifted way over to the right when I set the img_water1 to width=100%

can someone help me fix this?

you can see it here:

www.enviromark.ca/jay/Bridget/index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Education 101</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="main.css" type="text/css" media="screen">
</head>

<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="100" colspan="2"><img src="Images/img_water1.jpg" width="100%" height="100"></td>
</tr>
<tr>
<td width="80" valign="top"> 
<a href="reading1.htm">Summary 1</a> 
<a href="reading2.htm">Summary 2</a> 
<a href="reading3.htm">Summary 3</a> 
 
<a href="suggestedReadings.htm">Suggested Readings</a> 
 
<a href="contact.htm">Contact</a>
</td>
<td align="left" id="mainCell"> </td>
</tr>
<tr>
<td width="80"> </td>
<td align="center" valign="top"> 
Ward Design
</td>
</tr>
</table>
</body>
</html>

css

/*
a:link, a:active, a:visited {
color: #949191;
font-size : 12;
Font-Family: Arial;
text-decoration: none}
*/

a:link, a:active, a:visited {
color: #000000;
font-size : 12;
font-family: arial, sans-serif;
text-decoration: none}

a:hover {
color: #000000;
font-size : 12;
font-family: arial, sans-serif;
text-decoration: underline}

BODY {
scrollbar-arrow-color:#000000;
scrollbar-track-color:#FFFFFF;
scrollbar-shadow-color:#000000;
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#000000;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF}

FONT
{
color: #000000;
font-family: arial, sans-serif;}

#mainCell{
background-image: url("Images/background.jpg");
background-repeat:no-repeat;
}

thanks.