Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Page Layout 1

Status
Not open for further replies.

sailruner

Technical User
Apr 14, 2002
60
US
I have a page with a layout table, with a cell at the top, and a cell on left side, an a layout table in the middle.
When I place the header and L-side in there is always a small gap when I preview it. I have tried setting the header at fixed width, with the L-side as autostrech, and I have switch that around. There is always a gap.
What the heck am I missing to do? Thank you
 
hi sailruner,

where exactly is the gap appearing?

can we have a look the page somewhere?

it's a lot easier to diagnose if we can see the code.

ss...
 
SecretSquirrel
I can send a page view to an email address.

Here is the HTML
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
<script language=&quot;JavaScript&quot;>
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

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.indexOf(&quot;#&quot;)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf(&quot;?&quot;))>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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body bgcolor=&quot;#FFFFFF&quot; text=&quot;#000000&quot; onLoad=&quot;MM_preloadImages('L_side_r2_c2_f2.gif','L_side_r4_c2_f2.gif','L_side_r6_c2_f2.gif','L_side_r8_c2_f2.gif','L_side_r10_c2_f2.gif')&quot;>
<table width=&quot;758&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<tr>
<td valign=&quot;top&quot; height=&quot;128&quot; colspan=&quot;3&quot;> <img name=&quot;header&quot; src=&quot;file:///D|/Web sites/Tammy Perry/images/header.gif&quot; width=&quot;758&quot; height=&quot;105&quot; border=&quot;0&quot;>
<!-- fwtable fwsrc=&quot;header.png&quot; fwbase=&quot;header&quot; fwstyle=&quot;Dreamweaver&quot; fwdocid = &quot;742308039&quot; fwnested=&quot;0&quot; -->
</td>
</tr>
<tr>
<td width=&quot;153&quot; height=&quot;409&quot; valign=&quot;top&quot;>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;152&quot;>
<!-- fwtable fwsrc=&quot;L_SIDE.PNG&quot; fwbase=&quot;L_side.gif&quot; fwstyle=&quot;Dreamweaver&quot; fwdocid = &quot;742308039&quot; fwnested=&quot;0&quot; -->
<tr>
<td><img src=&quot;file:///D|/Web sites/Tammy Perry/images/spacer.gif&quot; width=&quot;12&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td><img src=&quot;file:///D|/Web sites/Tammy Perry/images/spacer.gif&quot; width=&quot;122&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td><img src=&quot;file:///D|/Web sites/Tammy Perry/images/spacer.gif&quot; width=&quot;18&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td><img src=&quot;file:///D|/Web sites/Tammy Perry/images/spacer.gif&quot; width=&quot;1&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
</tr>
<tr>
<td colspan=&quot;3&quot;><img name=&quot;L_side_r1_c1&quot; src=&quot;file:///D|/Web sites/Tammy Perry/images/slices/L_side_r1_c1.gif&quot; width=&quot;152&quot; height=&quot;137&quot; border=&quot;0&quot;></td>
<td><img src=&quot;file:///D|/Web sites/Tammy Perry/images/spacer.gif&quot; width=&quot;1&quot; height=&quot;137&quot; border=&quot;0&quot;></td>
</tr>
<tr>
<td rowspan=&quot;10&quot;><img name=&quot;L_side_r2_c1&quot; src=&quot;file:///D|/Web sites/Tammy Perry/images/slices/L_side_r2_c1.gif&quot; width=&quot;12&quot; height=&quot;271&quot; border=&quot;0&quot;></td>
<td><a href=&quot;#&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('L_side_r2_c2','','L_side_r2_c2_f2.gif',1);&quot; ><img name=&quot;L_side_r2_c2&quot; src=&quot;file:///D|/Web sites/Tammy Perry/images/slices/L_side_r2_c2.gif&quot; width=&quot;122&quot; height=&quot;26&quot; border=&quot;0&quot;></a></td>
<td rowspan=&quot;10&quot;><img name=&quot;L_side_r2_c3&quot; src=&quot;file:///D|/Web sites/Tammy Perry/images/slices/L_side_r2_c3.gif&quot; width=&quot;18&quot; height=&quot;271&quot; border=&quot;0&quot;></td>
<td><img src=&quot;file:///D|/Web sites/Tammy Perry/images/spacer.gif&quot; width=&quot;1&quot; height=&quot;26&quot; border=&quot;0&quot;></td>
</tr>
<tr>
<td><img name=&quot;L_side_r3_c2&quot; src=&quot;file:///D|/Web sites/Tammy Perry/images/slices/L_side_r3_c2.gif&quot; width=&quot;122&quot; height=&quot;14&quot; border=&quot;0&quot;></td>
<td><img src=&quot;file:///D|/Web sites/Tammy Perry/images/spacer.gif&quot; width=&quot;1&quot; height=&quot;14&quot; border=&quot;0&quot;></td>
</tr>
<tr>
<td><a href=&quot;#&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('L_side_r4_c2','','L_side_r4_c2_f2.gif',1);&quot; ><img name=&quot;L_side_r4_c2&quot; src=&quot;file:///D|/Web sites/Tammy Perry/images/slices/L_side_r4_c2.gif&quot; width=&quot;122&quot; height=&quot;26&quot; border=&quot;0&quot;></a></td>
<td><img src=&quot;file:///D|/Web sites/Tammy Perry/images/spacer.gif&quot; width=&quot;1&quot; height=&quot;26&quot; border=&quot;0&quot;></td>
</tr>
<tr>
<td><img name=&quot;L_side_r5_c2&quot; src=&quot;file:///D|/Web sites/Tammy Perry/images/slices/L_side_r5_c2.gif&quot; width=&quot;122&quot; height=&quot;13&quot; border=&quot;0&quot;></td>
<td><img src=&quot;file:///D|/Web sites/Tammy Perry/images/spacer.gif&quot; width=&quot;1&quot; height=&quot;13&quot; border=&quot;0&quot;></td>
</tr>
<tr>
<td><a href=&quot;#&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('L_side_r6_c2','','L_side_r6_c2_f2.gif',1);&quot; ><img name=&quot;L_side_r6_c2&quot; src=&quot;file:///D|/Web sites/Tammy Perry/images/slices/L_side_r6_c2.gif&quot; width=&quot;122&quot; height=&quot;26&quot; border=&quot;0&quot;></a></td>
<td><img src=&quot;file:///D|/Web sites/Tammy Perry/images/spacer.gif&quot; width=&quot;1&quot; height=&quot;26&quot; border=&quot;0&quot;></td>
</tr>
<tr>
<td><img name=&quot;L_side_r7_c2&quot; src=&quot;file:///D|/Web sites/Tammy Perry/images/slices/L_side_r7_c2.gif&quot; width=&quot;122&quot; height=&quot;14&quot; border=&quot;0&quot;></td>
<td><img src=&quot;file:///D|/Web sites/Tammy Perry/images/spacer.gif&quot; width=&quot;1&quot; height=&quot;14&quot; border=&quot;0&quot;></td>
</tr>
<tr>
<td><a href=&quot;#&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('L_side_r8_c2','','L_side_r8_c2_f2.gif',1);&quot; ><img name=&quot;L_side_r8_c2&quot; src=&quot;file:///D|/Web sites/Tammy Perry/images/slices/L_side_r8_c2.gif&quot; width=&quot;122&quot; height=&quot;26&quot; border=&quot;0&quot;></a></td>
<td><img src=&quot;file:///D|/Web sites/Tammy Perry/images/spacer.gif&quot; width=&quot;1&quot; height=&quot;26&quot; border=&quot;0&quot;></td>
</tr>
<tr>
<td><img name=&quot;L_side_r9_c2&quot; src=&quot;file:///D|/Web sites/Tammy Perry/images/slices/L_side_r9_c2.gif&quot; width=&quot;122&quot; height=&quot;13&quot; border=&quot;0&quot;></td>
<td><img src=&quot;file:///D|/Web sites/Tammy Perry/images/spacer.gif&quot; width=&quot;1&quot; height=&quot;13&quot; border=&quot;0&quot;></td>
</tr>
<tr>
<td><a href=&quot;#&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('L_side_r10_c2','','L_side_r10_c2_f2.gif',1);&quot; ><img name=&quot;L_side_r10_c2&quot; src=&quot;file:///D|/Web sites/Tammy Perry/images/slices/L_side_r10_c2.gif&quot; width=&quot;122&quot; height=&quot;26&quot; border=&quot;0&quot;></a></td>
<td><img src=&quot;file:///D|/Web sites/Tammy Perry/images/spacer.gif&quot; width=&quot;1&quot; height=&quot;26&quot; border=&quot;0&quot;></td>
</tr>
<tr>
<td><img name=&quot;L_side_r11_c2&quot; src=&quot;file:///D|/Web sites/Tammy Perry/images/slices/L_side_r11_c2.gif&quot; width=&quot;122&quot; height=&quot;87&quot; border=&quot;0&quot;></td>
<td><img src=&quot;file:///D|/Web sites/Tammy Perry/images/spacer.gif&quot; width=&quot;1&quot; height=&quot;87&quot; border=&quot;0&quot;></td>
</tr>
</table>
</td>
<td valign=&quot;top&quot; width=&quot;600&quot;>
<table width=&quot;100%&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<tr>
<td width=&quot;39&quot; height=&quot;293&quot;></td>
<td width=&quot;561&quot; valign=&quot;top&quot;>
<div align=&quot;center&quot;>text to be written here</div>
</td>
</tr>
<tr>
<td height=&quot;24&quot;></td>
<td></td>
</tr>
</table>
</td>
<td width=&quot;5&quot;></td>
</tr>
<tr>
<td height=&quot;38&quot;></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
 
Oh, I forgot The space appears between the header and left nav bar.
 
hi sailruner,

the problem is that the <td> in the header row of your table has the attribute height=&quot;128&quot;, but your image is only 105 pixels high. also there are a couple of extra spaces inside your <td>.

you can solve this by getting rid of the height attribute from the <td> and then removing the extra spaces so that the code for your cell will look like this...

<td valign=&quot;top&quot; colspan=&quot;3&quot;><img name=&quot;header&quot; src=&quot;images/header.gif&quot; width=&quot;758&quot; height=&quot;105&quot; border=&quot;0&quot;></td>

you wouldn't think it makes much difference, but it seems to work for me.

if i ever get problems with tables, i always give them a border temporarily - it usually means you can get closer to the problem a lot quicker.

hope this helps,

ss...
 
SecretSquirrel,

Yes, your good! that worked.
Thank you
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top