Tabs, Borders & Tables not playing well 2gether

[lsachs]

Gang -

I'm trying to close up some space in a table with some tabs, and I'm suspecting it has something to do with the use of spacer blocks in the tables, not sure. The idea is basically a table with 2 tabs at the top, and a 1px grey border around the table below the tabs. I'm trying to merge a heading before the table below that will span and merge with the grey border. O/C, I inherited this code from someone else and don't want 2 completely rewrite the tabs (a corp. standard). Trying to get this grey heading, titled "BLAH BLAH WORKSHOP," to span so it merges with the grey border. I'm trying 1px grey gifs #888888 or just a cel bg in that color, but it's slipping and sliding mostly vertical. I've added comments in CAPS on the trouble spots. Sorry for the loooong post....thanks in advance! (posted in another BBS, hope that doesn't bother any1!)

________code snippet below_________

<table width="427" border="0" cellpadding="0" cellspacing="0" colspan="5">
<!-- tabs -->
<tr>
<td background="images/tab_left1_1.gif" width="7"><spacer type="block" width="8" height="21"></td>
<td width="197" bgcolor="#999999"><a href="training_up.htm.htm" class="tableHeadLink">NNNNN
Workshop</a></td>
<td width="7" bgcolor="#999999" valign="bottom"><img src="images/tab_right1_1.gif" alt="" width="7" height="8" border="0"></td>
<td width="5" height="21"><spacer type="block" width="5" height="21"></td>
<td background="images/tab_left1_0.gif" width="7"><spacer type="block" width="7" height="21"></td>
<td width="197" bgcolor="#CCCCCC"><a href="training_arch.htm" class="Link"><font color="#CCCCCC">_</font>YYYYY Workshop
</a></td>
<td width="7" bgcolor="#CCCCCC"><spacer type="block" width="76" height="21"></td>
</tr>
<!-- white margin between tabs and box outline -->
<tr>
<td width="204" td colspan="2" background="images/tab_left2_1.gif"><spacer type="block" width="47" height="5"></td>
<td width="7" background="images/tab_right2_1.gif"><spacer type="block" width="7" height="5"></td>
<td width="5" height="5"><spacer type="block" width="5" height="5"></td>
<td width="211" td colspan="3"><spacer type="block" width="211" height="5"></td>
</tr>
<!-- grey line -->
<tr bgcolor="#999999">
<td width="204" td colspan="2" background="images/tab_left2_1.gif"><spacer type="block" width="47" height="1"></td>
<td width="7" background="images/tab_right2_1.gif"><spacer type="block" width="7" height="1"></td>
<td width="5" height="1"><spacer type="block" width="5" height="1"></td>
<td width="211" td colspan="3"><spacer type="block" width="211" height="1"></td>
</tr>
<!-- THIS IS WHAT I NEED HELP WITH!! -->
<tr>
<td><img src="images/888.gif" height="12" width="7" align="top"></td>
<td colspan="5" rowspan="2" valign="top" class="bodyCopy">
<table width="413" colpsan="6" border="0" cellspacing="0" cellpadding="1" >
<td class="sectionDark" colspan="5" height="12"><span class="tableHead">
BLAH BLAH WORKSHOP</span></td>
</tr>
<tr>
<td class='tdRegDetailLeft' height="90">
<span class="tableBodyCopyBold">Title:</span> __________<br> <span class="tableBodyCopyBold">Date:</span>
12/22/2002<br> <span class="tableBodyCopyBold">Time:</span>
8.00AM-5.00PM <br>
<span class="tableBodyCopyBold" colspan="5">Description:</span>This
workshop _________<a href="registr_bg.html">Find out more</a>&gt;<br>
<span class="tableBodyCopyBold" colspan="5">Registration:</span>You must register in advance for this workshop: <a href="registr_bg3.html"><img src="images/register_online.gif" width="83" height="15" border="0"></a>
</span> </td>
</tr>
<tr>
<td class='tdRegDetailLeft' height="88"> <br>Another Workshop</a><br> <span class="tableBodyCopyBold">Date:</span>
12/23/2002<br> <span class="tableBodyCopyBold">Time:</span>
9.30AM-12.00PM <br> <span class="tableBodyCopyBold">Description:</span>
Click to find out &lt;<a href="registr_bg3.html">more</a>&gt;<br>
<span class="tableBodyCopyBold" colspan="5">You may register
through this website: <a href="registr_bg3.html"><img src="images/register_online.gif" width="83" height="15" border="0"></a></span>
</td>
</tr>
</table>
<br></td>
<!--THIS IS THE RIGHT SIDE CELL GIVING ME PROBLEMS-->
<td><img src="images/888.gif" height="12" width="7" align="top"></td>
</tr>
<tr>
<td width="7" height="125" valign="top" background="images/tab_left2_1.gif"></td>
<td background="images/tab_right2_1.gif" valign="top"></td>
</tr>
<!-- box bottom -->
<tr bgcolor="#999999">
<td width="5" height="1"><spacer type="block" width="7" height="1"></td>
<td colspan="5"><spacer type="block" width="7" height="1"></td>
<td width="7"><spacer type="block" width="7" height="1"></td>
</tr>
</table>
-----END CODE SNIPPET-----

[QuietDean]

I am a bit unsure of the problem, but this may help. Place this code in the head of your document to hightlight the tables and cells -

<style>
table {
border: 1px solid black;
}
td {
border: 1px solid red;
}
</style>

If not, post back. I have your code on your machine, just a bit unclear of the exact problem.

[lsachs]

i did some screenshots of what i'm after based on your border help & what it looks like without borders. i blacked out the borders. can't seem to post to the thread and having trouble getting to my server now; i can email the gifs of these screenshots if u want.

[QuietDean]

sure dean @ quietdean.com

edited to put spaces I dont want any spam spiders getting your email.

To mail dean remove the spaces on both sides of the @

[lsachs]

take a look at them here:

www.deborahpangle.com/images/screenshot1.gif
www.deborahpangle.com/images/screenshot2.gif

screenshot2 - is w/out borders
screenshot1 - is w/borders.

In 2, you can see where the trouble is...trying to line up that grey border with the piece filling that gap. I've circled it too, in case you can't tell. This is displaying for IE, but shoudl work in NN4+.

Sorry for the ugly blacking out; this is major corporate hoo-hah.....

-lee

[QuietDean]

Try replacing the gifs in the cell with a <br /> tag and using a background color/image instead.

I am using IE6 and mine looked completely different to yours. It may be worth ditching the legacy code and starting again with it.

[lsachs]

if i understand that correctly, i'm replacing gifs w/background img AND the BR tag.

i actually had been trying bg images already and that didn't help. will try the br's too.

btw, i posted this b4, but "why is it there's just no decent explanations of these things on the web. every tutorial shows you how to do tables, tds, trs, in the most boring, plain, only-seen-on-amateur-sites display. professional sites have complex tables. and there's no guides for that. period.

[QuietDean]

We have found the only way to really learn tables to sit down and bully thru them

[benzden]

Yes, TABLEs are very powerful and offer a diversity of solutions to web site image and text placement.

Use a series of character #160s strung together (or & nbsp immediately adjacent to text to move it left or right. Do the same inside otherwise empty <TD> or <TH> cells to make set sized blank columns - a technique I favor over the WIDTH=..% but should work the same as WIDTH=.. (without the percent).

Use HSPACE= and VSPACE= inside the <IMG ...> tag to keep text away from images.

Use ALIGN=left or right and VALIGN=top inside the <TD ...> attributes to locate text.

I started HTML coding using the dummy 1 byte tab.gif for spacing but then almost immediately abandoned it in favor of other techniques - hardly ever use it anymore.