Hi guys how would I get the middle section to stay in the middle with the test text not making any differents to the center section of the page ? -

 

<!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>

<style type="text/css">
<!--
body
{ 
background-image: url(img/fade.png);
background-repeat: repeat-x;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.:: Pro Devs ::.</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</style>
</head>

<body bgcolor="#ffffff" bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="10">
<TABLE WIDTH="640" HEIGHT="100" BACKGROUND="IMG/bar.png" align="center">
<TR>
<TD>
</TR>
</TD>
</TABLE>
<TABLE WIDTH="AUTO" align="center">
<TR>
<TD>
<div align="center"></div>
 <ul id="MenuBar1" class="MenuBarHorizontal">
<li>
  <div align="center"><a href="index.html" class="style7"><strong>Home</strong></a> </div>
</li>
<li>
  <div align="center"><a href="about.html" class="style7"><strong>About</strong></a> </div>
</li>
<li>
  <div align="center" class="style7">
	<div align="center"><a href="portfolio.html"><strong>Portfolio</strong></a></div>
  </div>
</li>	
<li>
  <div align="center" class="style7">
	<div align="center"><a href="prices.html"><strong>Prices</strong></a></div>
  </div>
</li>  
<li>
  <div align="center"><a href="contact.html" class="style7"><STRONG>Contact Us</STRONG></a> </div>
</li>
</ul>

<div align="center"></div>
<BR>
<BR>
<div align="center"></div>
</TR>
</TD>
</TABLE>
<TABLE WIDTH="AUTO" ALIGN="LEFT">
<TR VALIGN="TOP">
<TD ALIGN="LEFT">
TEST
<BR>
TEST
<BR>
</TR>
</TD>
</TABLE>
</TABLE>
</TR>
</TD>
<CENTER>
<DIV ALIGN="CENTER">
<TABLE WIDTH="AUTO" align="CENTER">
<TR WIDTH="640">
<TD WIDTH="640">
 <script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<TABLE CLASS="style8" WIDTH="435" ALIGN="LEFT" style="border: 0px solid;"> 
<TR VALIGN="TOP"
<TD ALIGN="CENTER" topmargin="0" leftmargin="0">
<script LANGUAGE="JavaScript">
<!-- Begin
showImage();
//  End -->
</script>
</TR>
</TD>
<TR VALIGN="TOP">
<TD ALIGN="LEFT" class="style8">
<BR>
<span class="style7"><span class="style12"><U>
Welcome To Pro Devs</U></span>
<BR>
<span class="style14"><BR>
Pro Devs is a fully certified professional website design agency. With over 5 years of website design experience
<BR>
we are the ultimate network for website design and developments. With some of the lowest prices on the web.</span></span><span class="style14">
</span>
</TR>
</TD>

Is the table for your layout?

 

Easy answer, delete all and use modern ways, HTML and CSS.

Middle section not affecting the centre section?

I didn't quite get that one. Got a mockup of what you're trying to do? That might help us help you.

Yes I'm confused as well - what is the "middle section"?

 

All I see in your code is lots on unnecessary table tags and some errors in your code... it would be so much easier using CSS.