PDA

View Full Version : Table Layout...Extra Space at Bottom of Page..Please help


Post Renaissance
10-28-2009, 01:42 AM
Hi Everyone. I am a new member and a newbie to Dreamweaver.

I am working on a personal website for a tshirt brand i am launching.

I had a friend give me a template of one of his websites to start learning from. Its completely made up of tables.

So far i have able to get over some obstacles on my own by trial and error, but this one i cannot find a solution.


When i preview my page in Safari and Firefox, i get a lot of extra space at the bottom of the page. I cannot find how to get rid of it, and my google searches have come up empty with a solution that works for my situation. Thats how i found this site :)

So if someone can please take a look at the code and see what might be causing this extra space, i would really really appreciate it!

Also if someone sees any extra code that dosent need to be there, please let me know. So far i'm very new to dreamweaver and web design in general, and with code i'm a complete newbie, but when i look at this code, it just seems like theres so much that might not be needed.

I have included screenshots of the preview.


Please Help.

Thank you in advance,
Kristina

Last one, if you look at the screenshot, you will see 2 purple bars where the page is supposed to end. I line these bars up visually in dreamweaver, but when i preview they dont line up like in the screenshot.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style type="text/css">
<!--
.style3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #1E1C6D;
}
a:link {
color: #6a737b;
text-decoration: none;
}
.style41 {font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; }
a:visited {
color: #6A737B;
text-decoration: none;
}
a:hover {
color: #6A737B;
text-decoration: none;
}
a:active {
text-decoration: none;
}
.style42 {color: #FFFFFF}
body {
background-color: #CCCCCC;
}
.style43 {color: #22207A}
-->
</style>

<center>
<head>
<title>PostRen.Net</title>
<link rel="shortcut icon" href="images/jibaro_favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>


<table width="970" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<!--DWLayoutTable-->
<tr>
<td width="10" height="2554">&nbsp;</td>
<td width="950" valign="top"><table width="98%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td height="522" colspan="4" valign="top"><table width="98%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<!--DWLayoutTable-->
<tr>
<td width="99" height="2"></td>
<td width="12"></td>
<td width="558"></td>
<td width="1"></td>
<td width="289"></td>
</tr>
<tr>
<td rowspan="2" valign="top"><img src="Images/Logo_Web.jpg" alt="Logo" width="96" height="99" align="absbottom" /></td>
<td height="81"></td>
<td>&nbsp;</td>
<td></td>
<td><table width="284" height="83">
<tr bordercolor="#006633">
<td width="167"><span class="style42"></span></td>
<td width="42"><img src="Images/JibaritoPR.jpg" width="108" height="120" /></td>
</tr>
</table></td>
</tr>
<tr>
<td height="14"></td>
<td colspan="3" rowspan="2" valign="top" class="style41"><span class="style41 style42"><a href="_html new/onlineshop.html" class="style41">STORE</a></span><span class="style41"> | </span><span class="style41 style42"><a href="_html new/collaborations.html" class="style41">MI GENTE</a></span> | <span class="style41 style42"><a href="_html new/music.html">MUSICA</a></span> |<a href="_html new/retailers.html"> </a><span class="style41 style42"><a href="_html new/retailers.html">RETAILERS</a></span> | <span class="style41 style42"><a href="http://www.postren.blogspot.com">BLOG</a></span> | <span class="style41 style42"><a href="_html new/about.html">NOSOTROS</a></span> | <span class="style41 style42"><a href="_html new/contact.html">DANOS UN CALL</a></span></td>
</tr>


<tr>
<td height="1"></td>
<td></td>
</tr>
<tr>
<td height="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>




<tr>
<td height="18" colspan="5" valign="top" bgcolor="#22207A"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="9"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="382" colspan="5" valign="top"><img src="Images/homepage_smallerDigga.jpg" width="963" height="380" /><br></td>
</tr>
<tr>
<td height="8"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="18" colspan="3" valign="top" bgcolor="#22207A"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td></td>
<td valign="top" bgcolor="#22207A"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>


</table></td>
</tr>


<tr>
<td width="148" height="2"></td>
<td width="536"></td>
<td width="4"></td>
<td width="280" rowspan="4" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="278" height="5"></td>
</tr>
<tr>
<td height="18" valign="top"><span class="style41">NEW PRODUCTS</span></td>
</tr>
<tr>
<td height="16"></td>
</tr>
<tr>
<td height="748" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="143" height="119" valign="top"><div align="center"><span class="style46"><img src="Images/homepage_canikick.jpg" alt="canikick_home" width="130" height="128" /><br>
</span></div></td>
<td width="9">&nbsp;</td>
<td width="130" valign="top"><img src="Images/homepage_fckfortuno.jpg" width="130" height="128" /><br> </td>
</tr>
<tr>
<td height="22" valign="top"><div align="center"><span class="style46"><span class="style39"><strong>Hecho En Puerto Pobre</strong></span><br>
Shirt</span></div></td>
<td>&nbsp;</td>
<td valign="top"><div align="center"><span class="style46"><span class="style39"><strong>**** Fortu&ntilde;o</strong></span><br>
T-shirt</span></div></td>
</tr>
<tr>
<td height="10"></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="120" valign="top"><img src="Images/hechoenpr_homepage.jpg" alt="hechoenpr" width="130" height="128" /></td>
<td></td>
<td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="22" valign="top"><div align="center"><span class="style46"><span class="style39"><strong>Hecho en Puerto Pobre</strong></span><br>
T-shirt</span></div></td>
<td></td>
<td valign="top"><div align="center" class="style47"><span class="style18"><span class="style39"><strong>Mi Abuela Cocina Mejor</strong></span><br>
T-shirt</span></div></td>
</tr>
<tr>
<td height="10"></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="119" valign="top"><img src="Images/homepage_stackem.jpg" alt="stackem_homepage" width="130" height="128" /></td>
<td></td>
<td valign="top"><img src="Images/homepage_getdrunk.jpg" width="130" height="128" /></td>
</tr>
<tr>
<td height="22" valign="top"><div align="center"><span class="style46"><span class="style39"><strong>Stack em High</strong></span><br>
T-shirt</span></div></td>
<td></td>
<td valign="top"><div align="center"><span class="style46"><strong>Play Records</strong><br>
T-shirt</span></div></td>
</tr>
<tr>
<td height="10"></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="119" valign="top"><img src="Images/homepage_igotsole_ash.jpg" alt="I got Sole homepage" width="130" height="127" /></td>
<td></td>
<td valign="top"><img src="Images/homepage_tvmademe.jpg" alt="Tv Made Me homepage" width="130" height="127" /></td>
</tr>
<tr>
<td height="22" valign="top"><div align="center"><span class="style46"><span class="style39"><strong>I Got Sole</strong></span><br>
T-shirt</span></div></td>
<td></td>
<td valign="top"><div align="center"><span class="style46"><span class="style39"><strong>TV Made Me</strong></span><br>
T-shirt</span></div></td>
</tr>
<tr>
<td height="12"></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="119" valign="top"><img src="Images/homepage_braveone_white.jpg" alt="Brave One homepage" width="130" height="127" /></td>
<td></td>
<td valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="22" valign="top"><div align="center"><span class="style46"><span class="style39"><strong>Brave One</strong></span><br>
T-shirt</span></div></td>
<td></td>
<td valign="top"><div align="center"><span class="style46"><span class="style39"><strong>Space Is The Place</strong></span><br>
T-shirt</span></div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="19">&nbsp;</td>
</tr>
<tr>
<td height="243" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="278" height="2" valign="top"><hr></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td height="19" valign="top"><span class="style80">NETWORK</span></td>
</tr>
<tr>
<td height="8"></td>
</tr>
<tr>
<td height="74" valign="top"><table width="280" height="91" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<a href="http://www.facebook.com/pages/101-APPAREL/33705934789" target="_blank" onMouseOver="MM_swapImage('Image32','','_NEW_SITE/home_page/myspace_roll.jpg',1)" onMouseOut="MM_swapImgRestore()"><br>
</a></td>
</tr>
<tr>
<td height="6"></td>
</tr>



<tr>
<td height="106" valign="top"><form action="mailto:postrenaissance@gmail.com?subject=Stay up with PostRen" method="post" enctype="text/plain">
</FORM> <form action="mailto:postrenaissance@gmail.com?subject=Stay up with PostRen" method="post" enctype="text/plain">
<table>
<!--DWLayoutTable-->
<tr><td colspan="2">
<span class="style3">Stay Up With Us-Join our Email List</span>
<INPUT TYPE="text"><BR>

</td></tr>
<tr><td width="67" height="85" align=center valign="top">

<div align="left">
<INPUT TYPE="submit" value="submit" style="color: #FFFFFF; background-color: #22207A">
</div></td>
<td width="196">&nbsp;</td>
</tr>
</table>
</FORM></td>
</tr>
<tr>
<td height="24" bgcolor="#22207A">&nbsp;</td>
</tr>



</table></td>
</tr>



</table></td>
</tr>
<tr>
<td height="1270" colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->

<tr>
<td height="18" colspan="3" valign="top"><p class="style80">NOTICIAS</p></td>
</tr>
<tr><td><IFRAME SRC="http://postren.blogspot.com/" width=652 height=1000 border=0></IFRAME> </td></tr>
<tr>
<td width="652" height="12"></td>
<td width="1"></td>
<td width="30"></td>
</tr>



<tr>
<td height="0"></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="24"></td>
<td></td>
<td></td>
<td width="1"></td>
</tr>


</table></td>
<td width="4">&nbsp;</td>
</tr>
<tr>
<td height="32" bgcolor="#22207A"></td>
<td bgcolor="#22207A"></td>
<td></td>
</tr>
</table>

Corrosive
10-28-2009, 08:25 AM
This...

<td height="1270" colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->

seems very high. Try making the height lower.

Post Renaissance
10-28-2009, 03:12 PM
Hi Corrosive, thanks for the response. I changed that height to 100px just to see a drastic change and it just moved the right bar up, but in dreamweaver it shows that right bar as being very thick.

http://i180.photobucket.com/albums/x47/postrenaissance/Picture27.png

http://i180.photobucket.com/albums/x47/postrenaissance/Picture26.png

i still cant seem to be able to change anything that will get rid of that space.

Corrosive
10-28-2009, 03:19 PM
I was just about to ask if you had any styles applied to the body tag and then noticed that you don't have any! You considered starting again?

Post Renaissance
10-28-2009, 03:36 PM
Starting over ? My headache just got worst lol. Can I apply a body style now? Would starting over be the most efficient way? Problem is that it'll still be the same template. So if I make it look the smae again the problem shoud arrise again.
Thanks

Corrosive
10-28-2009, 03:44 PM
Is this an online store and, if so, What kind of shopping cart software are you using? Many of them have templates available for download or you could pay a designer to make it look good for you.

A normal website layout (as well as being done with CSS and divs rather than tables nowadays) will have head tags and body tags. You could try putting and opening body tag before your first table and a closing one at the end. Not saying that will help your situation but they are kind of required!

The other height that stands out is <td width="10" height="2554">&nbsp;</td> but I'd really only be guessing. Do you have any kind of stylesheet?