Hey not been around these parts in a while. I need some help for a college project.
I'm creating a website for a fictional company but have run into a problem with my coding. The center section where I have placed text works fine when the browser is resized, but the banner and a table I created to hold links moves out of place. I don't know if this problem is caused by my css code or html code, nor do I know how to resolve it, any help would be appreciated.
To replicate the problem, simply open the index page in any brower, then minimise it and mess about with the size of the window, the problem will be seen cleary then when the banner changes position along with the table holding the links.
Please find the folder with all the files necassary for the site to work.
code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Phoenix - Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href="mystsyle.css" rel="stylesheet" type="text/css"> - this line has been deleted now on all pages, but not in the attachment.
<link href="mystyle.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body,td,th {
color: #000000;
font-family: Times New Roman, Times, serif;
}
body {
background-color: #0099CC;
}
a:link {
color: #0099CC;
}
a:visited {
color: #0099CC;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body leftmargin="20" topmargin="20">
<div id="text" style="position:absolute; left:125px; top:250px; width:1005px; height:420px; z-index:4; background-color: #0066FF; layer-background-color: #0066FF; border: 1px none #000000;">
<p align="center"><img src="Images/homepage.gif" alt="Home" width="400" height="60"></p>
<p align="left">This is the homepage segment of the website.</p>
</div>
<div id="banner" align="center"><a href="index.htm"><img src="Images/PHCMCN2.png" alt="Banner - Links to Home Page" width="1016" height="160"></a></div>
<div id="links" align="center">
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="index.htm"><img src="Images/homelink.gif" alt="Home" width="200" height="50"></a></td>
<td><a href="tutorials.htm"><img src="Images/tutorialslink.gif" alt="Tutorials" width="200" height="50"></a></td>
<td><a href="contact.htm"><img src="Images/contactlink.gif" alt="Contact" width="200" height="50"></a></td>
<td><a href="enquiries.htm"><img src="Images/enquirieslink.gif" alt="Enquiries" width="200" height="50"></a></td>
<td><a href="services.htm"><img src="Images/serviceslink.gif" alt="Services" width="200" height="50"></a></td>
</tr>
</table>
<a href="services.htm"></a></td>
</tr>
</table>
</div>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<div id="links2">
<div align="center">
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="index.htm"><img src="Images/homelink.gif" alt="Home" width="200" height="50"></a></td>
<td><a href="tutorials.htm"><img src="Images/tutorialslink.gif" alt="Tutorials" width="200" height="50"></a></td>
<td><a href="contact.htm"><img src="Images/contactlink.gif" alt="Contact" width="200" height="50"></a></td>
<td><a href="enquiries.htm"><img src="Images/enquirieslink.gif" alt="Enquiries" width="200" height="50"></a></td>
<td><a href="services.htm"><img src="Images/serviceslink.gif" alt="Services" width="200" height="50"></a></td>
</tr>
</table>
</div>
</div>
<p align="center"> </p>
</body>
</html>
and heres the code incase you don't need to download the file to find the problem.
Thanks for any help in advance. And yes it is very C**p and basic but I did only start it this morning.
/ 
Attachment: 
