table borders inside ajax tabs

[Chadi]

1) Script Title:
Ajax Tabs Content script

2) Script URL (on DD):
http://dynamicdrive.com/dynamicindex...tent/index.htm

3) Describe problem:

Every time I click a tab, it creates an inner table border. This happens every time I click a time, as you see in screenshots they build up. My coding is below and I'm using this in a vbulletin forum (forumhome template)

header

<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css">
<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">
</script>
</head>


main (entire table, including my shoutbox)

<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]">
	<tr>
		<td class="alt2">
		<!-- BEGIN CBOX - http://www.cbox.ws -->
		<div align="center">
<table border="0" cellpadding="0" cellspacing="0" summary="cbox tagboard" width="100%">
<tr><td align="center">
	<iframe frameborder="0" width="100%" height="175" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&amp;sec=main" marginheight="1" marginwidth="1" scrolling="auto" name="cboxmain" id="cboxmain" style="border: 1px solid #E4E6F5"></iframe>
</td>
	<td align="center" rowspan="2" width="255" style="padding-left: 10px">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
	<tr>
		<td align="center" height="20" bgcolor="#FFFFFF">
		<div class="smallfont">
		<b>Members Currently in Live Chat:&nbsp;
		<span style="background-color: #E4E6F5">&nbsp;<font size="4">$totalchatters</font>&nbsp;
		</span></b></div></td>
	</tr>
	<tr>
		<td align="center" height="20">&nbsp;</td>
	</tr>
</table>
			<ul id="maintab" class="shadetabs">
			<li class="selected"><a href="#default" rel="ajaxcontentarea">Social</a></li>
			<li><a href="ajaxtabs/tab1.htm" rel="ajaxcontentarea">Tools</a></li>
			<li><a href="ajaxtabs/tab2.htm" rel="ajaxcontentarea">Info</a></li>
			<li><a href="ajaxtabs/tab3.htm" rel="ajaxcontentarea">Fun</a></li>
			<li><a href="ajaxtabs/tab4.htm" rel="ajaxcontentarea">Site</a></li>
			</ul>
			<div id="ajaxcontentarea" class="contentstyle">
			<table style="width: 100%">
				<tr>
					<td class="style1" style="width: 126px">
					<img alt="Live Chat!" src="images/chat.png" width="48" height="48"></td>
					<td class="style1" style="width: 127px">
					<img alt="Events" src="images/events.png" width="48" height="48"></td>
				</tr>
				<tr>
					<td class="style1" style="width: 126px"><span lang="en-us">
					<div class="smallfont">Chat</div></span></td>
					<td class="style1" style="width: 127px"><span lang="en-us">
					<div class="smallfont">Events</div></span></td>
				</tr>
				<tr>
					<td class="style1" style="width: 126px">
					<img alt="Members" src="images/photos.png" width="48" height="48"></td>
					<td class="style1" style="width: 127px">
					<img alt="Journal" src="images/journal.png" width="48" height="48"></td>
				</tr>
				<tr>
					<td class="style1" style="width: 126px"><span lang="en-us">
					<div class="smallfont">Photos</div></span></td>
					<td class="style1" style="width: 127px"><span lang="en-us">
					<div class="smallfont">Journals</div></span></td>
				</tr>
			</table>		
			</div>
	</td></tr><tr>
	<td align="center">
<if condition="in_array($bbuserinfo['usergroupid'], array(2,6,7,25))">
<iframe frameborder="0" width="100%" height="60" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&amp;sec=form&amp;nme=<?=urlencode($username)?>&amp;nmekey=<?=md5('1j3n8ei6mo4j2g40'.$username)?>&amp;wname=75&amp;wemail=68&amp;wmsg=250" marginheight="1" marginwidth="1" scrolling="no" allowtransparency="yes" name="cboxform" id="cboxform" style="border: 1px solid #E4E6F5"></iframe>
<else />
You must be logged in and registered to use this shoutbox
</if> 
</td></tr>
</table>
		</div>
<!-- END CBOX -->
</td>
	</tr>
</tbody>

bottom

<script type="text/javascript">
//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
startajaxtabs("maintab")
</script>

</body>

[Chadi]

Can I get a little assistance please?

Thanks

[ddadmin]

Do you have a URL to the problem page? It'd make it a lot easier, to be able to see the source of the entire page.

[Chadi]

I had to take it off for now

[ddadmin]

Can you attach the souce for the entire page then? Your code above begins at <tbody>.

[Chadi]

Ok here it is in two parts since it exceeds 10k max post limit

$stylevar[htmldoctype]
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" 
lang="$stylevar[languagecode]" xml:lang="$stylevar[languagecode]">
<head>
	<!-- no cache headers -->
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="-1" />
	<meta http-equiv="Cache-Control" content="no-cache" />
	<!-- end no cache headers -->
	$headinclude
	<title><phrase 1="$vboptions[bbtitle]">$vbphrase[x_powered_by_vbulletin]</phrase></title>
</head>
<body>
$header
$navbar

<!-- peterska2 side column -->
<table border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="top">
<!-- / peterska2 side column -->

<!-- guest welcome message -->
<if condition="$show['guest']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">

	<tr>
		<td class="tcat"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
	</tr>
	<tr>
		<td class="alt1">
        <phrase 1="faq.php$session[sessionurl_q]" 2="register.php$session[sessionurl_q]">$vbphrase[first_visit_message]</phrase>
    </td>
	
	</tr>
</table>
<div class="cat_spacer"></div>
</if>
<!-- / guest welcome message -->

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%">

	<tr>
		<td class="tcat">
			<a href="online.php$session[sessionurl_q]" rel="nofollow">$vbphrase[currently_active_users]</a>: $totalonline</td>
	</tr>

<if condition="$show['loggedinusers']"></if>
<!-- logged-in users -->
<tbody>
	<tr>
		<td class="thead">
			<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].gif" alt="" border="0" /></a>
			Talk Jesus Shoutbox!</td>
	</tr>
</tbody>
<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]">
	<tr>
		<td class="alt2">
		<!-- BEGIN CBOX - http://www.cbox.ws -->
		<div align="center">
<table border="0" cellpadding="0" cellspacing="0" summary="cbox tagboard" width="100%">
<tr><td align="center">
	<iframe frameborder="0" width="100%" height="175" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&amp;sec=main" marginheight="1" marginwidth="1" scrolling="auto" name="cboxmain" id="cboxmain" style="border: 1px solid #E4E6F5"></iframe>
</td>
	<td align="center" rowspan="2" width="255" style="padding-left: 10px">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
	<tr>
		<td align="center" height="20" bgcolor="#FFFFFF">
		<div class="smallfont">
		<b>Members Currently in Live Chat:&nbsp;
		<span style="background-color: #E4E6F5">&nbsp;<font size="4">$totalchatters</font>&nbsp;
		</span></b></div></td>
	</tr>
	<tr>
		<td align="center" height="20">&nbsp;</td>
	</tr>
</table>
			<ul id="maintab" class="shadetabs">
			<li class="selected"><a href="#default" rel="ajaxcontentarea">Social</a></li>
			<li><a href="ajaxtabs/tab1.htm" rel="ajaxcontentarea">Tools</a></li>
			<li><a href="ajaxtabs/tab2.htm" rel="ajaxcontentarea">Info</a></li>
			<li><a href="ajaxtabs/tab3.htm" rel="ajaxcontentarea">Fun</a></li>
			<li><a href="ajaxtabs/tab4.htm" rel="ajaxcontentarea">Site</a></li>
			</ul>
			<div id="ajaxcontentarea" class="contentstyle">
			<table style="width: 100%">
				<tr>
					<td class="style1" style="width: 126px">
					<img alt="Live Chat!" src="images/chat.png" width="48" height="48"></td>
					<td class="style1" style="width: 127px">
					<img alt="Events" src="images/events.png" width="48" height="48"></td>
				</tr>
				<tr>
					<td class="style1" style="width: 126px"><span lang="en-us">
					<div class="smallfont">Chat</div></span></td>
					<td class="style1" style="width: 127px"><span lang="en-us">
					<div class="smallfont">Events</div></span></td>
				</tr>
				<tr>
					<td class="style1" style="width: 126px">
					<img alt="Members" src="images/photos.png" width="48" height="48"></td>
					<td class="style1" style="width: 127px">
					<img alt="Journal" src="images/journal.png" width="48" height="48"></td>
				</tr>
				<tr>
					<td class="style1" style="width: 126px"><span lang="en-us">
					<div class="smallfont">Photos</div></span></td>
					<td class="style1" style="width: 127px"><span lang="en-us">
					<div class="smallfont">Journals</div></span></td>
				</tr>
			</table>		
			</div>
	</td></tr><tr>
	<td align="center">
<if condition="in_array($bbuserinfo['usergroupid'], array(2,6,7,25))">
<iframe frameborder="0" width="100%" height="60" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&amp;sec=form&amp;nme=<?=urlencode($username)?>&amp;nmekey=<?=md5('1j3n8ei6mo4j2g40'.$username)?>&amp;wname=75&amp;wemail=68&amp;wmsg=250" marginheight="1" marginwidth="1" scrolling="no" allowtransparency="yes" name="cboxform" id="cboxform" style="border: 1px solid #E4E6F5"></iframe>
<else />
You must be logged in and registered to use this shoutbox
</if> 
</td></tr>
</table>
		</div>
<!-- END CBOX -->
</td>
	</tr>
</tbody>
</table>
<div class="spacer"></div>
<br />

<!-- what's going on box -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
	<tr>
		<td class="tcat" colspan="2">$vbphrase[whats_going_on]</td>
	</tr>
</thead>

<if condition="$show['loggedinusers']">
<!-- logged-in users -->
<tbody>
	<tr>
		<td class="thead" colspan="2">
			<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].gif" alt="" border="0" /></a>
			<a href="online.php$session[sessionurl_q]" rel="nofollow">$vbphrase[currently_active_users]</a>: $totalonline (<phrase 1="$numberregistered" 2="$numberguest">$vbphrase[x_members_and_y_guests]</phrase>)
		</td>
	</tr>
</tbody>
<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]">
	<tr>
		<td class="alt2"><a href="online.php$session[sessionurl_q]" rel="nofollow"><img src="$stylevar[imgdir_misc]/whos_online.gif" alt="$vbphrase[view_whos_online]" border="0" /></a></td>
		<td class="alt1" width="100%">
			<div class="smallfont">
				<div style="white-space: nowrap"><phrase 1="$recordusers" 2="$recorddate" 3="$recordtime">$vbphrase[most_users_ever_online_was_x_y_at_z]</phrase></div>
				<div>$activeusers</div>
			</div>
		</td>
	</tr>
</tbody>
<!-- end logged-in users -->
</if>

[Chadi]

<tbody>
	<tr>
		<td class="thead" colspan="2">
			<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_stats')"><img id="collapseimg_forumhome_stats" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_stats].gif" alt="" border="0" /></a>
			<phrase 1="$vboptions[bbtitle]">$vbphrase[x_statistics]</phrase>
		</td>
	</tr>
</tbody>
<tbody id="collapseobj_forumhome_stats" style="$vbcollapse[collapseobj_forumhome_stats]">
	<tr>
		<td class="alt2"><img src="$stylevar[imgdir_misc]/stats.gif" alt="<phrase 1="$vboptions[bbtitle]">$vbphrase[x_statistics]</phrase>" border="0" /></td>
		<td class="alt1" width="100%">
		<div class="smallfont">
			<div>
				$vbphrase[threads]: $totalthreads,
				$vbphrase[posts]: $totalposts,
				$vbphrase[members]: $numbermembers<if condition="$show['activemembers']">,
					<span title="<phrase 1="$vboptions[activememberdays]">$vbphrase[within_the_last_x_days]</phrase>">$vbphrase[active_members]: $activemembers</span>
				</if>
			</div>
			<div><phrase 1="member.php?$session[sessionurl]u=$newuserid" 2="$newusername">$vbphrase[welcome_to_our_newest_member_x]</phrase></div>
		</div>
		</td>
	</tr>
</tbody>
<if condition="$show['birthdays']">
<!-- today's birthdays -->
<tbody>
	<tr>
		<td class="thead" colspan="2">
			<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_birthdays')"><img id="collapseimg_forumhome_birthdays" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_birthdays].gif" alt="" border="0" /></a>
			$vbphrase[todays_birthdays]
		</td>
	</tr>
</tbody>
<tbody id="collapseobj_forumhome_birthdays" style="$vbcollapse[collapseobj_forumhome_birthdays]">
	<tr>
		<td class="alt2"><a href="calendar.php?$session[sessionurl]do=getday&amp;day=$today&amp;sb=1"><img src="$stylevar[imgdir_misc]/birthday.gif" alt="$vbphrase[view_birthdays]" border="0" /></a></td>
		<td class="alt1" width="100%"><div class="smallfont">$birthdays</div></td>
	</tr>
</tbody>
<!-- end today's birthdays -->
</if>
<if condition="$show['upcomingevents']">
<tbody>
	<tr>
		<td class="thead" colspan="2">
			<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_events')"><img id="collapseimg_forumhome_events" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_events].gif" alt="" border="0" /></a>
			<if condition="$show['todaysevents']">$vbphrase[todays_events]<else /><phrase 1="$vboptions[showevents]">$vbphrase[upcoming_events_for_the_next_x_days]</phrase></if>
		</td>
	</tr>
</tbody>
<tbody id="collapseobj_forumhome_events" style="$vbcollapse[collapseobj_forumhome_events]">
	<tr>
		<td class="alt2"><a href="calendar.php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/calendar.gif" alt="$vbphrase[calendar]" border="0" /></a></td>
		<td class="alt1" width="100%"><div class="smallfont">$upcomingevents</div></td>
	</tr>
</tbody>
</if>

<tbody>
<tr>
<td class="tcat" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
<if condition="$vboptions['forumleaders']">&nbsp; &nbsp;
<a href="showgroups.php?$session[sessionurl_q]" rel="nofollow">$vbphrase[view_forum_leaders]</a></if>
</strong></div></td>
</tr>
</tbody>

</table>
$forumhome_markread_script
<!-- end what's going on box -->

<!-- icons -->
<div class="spacer"></div>
<table class="icon_legend" align="center" border="0" cellpadding="6" cellspacing="0" width="100%">


<tbody>
<tr align="center">
	<td class="alt2"><img src="$stylevar[imgdir_statusicon]/forum_new_small.gif" alt="" border="0" /></td>
	<td align="left" class="alt1">
		<div class="smallfont">$vbphrase[forum_contains_new_posts]</div>
		
		
	</td>
	<td class="alt2" ><img src="$stylevar[imgdir_statusicon]/forum_old_small.gif" alt="" border="0" /></td>
	<td align="left" class="alt1" ><div class="smallfont">$vbphrase[forum_contains_no_new_posts]</div></td>
	<if condition="$vboptions['showlocks']"><td class="alt2" ><img src="$stylevar[imgdir_statusicon]/forum_new_lock_small.gif" alt="" border="0" /><img src="$stylevar[imgdir_statusicon]/forum_old_lock_small.gif" alt="" border="0" /></td>
	<td align="left" class="alt1" ><div class="smallfont">$vbphrase[forum_is_closed_for_posting]</div></td></if>
</tr>


</tbody>

</table>
<!-- /icons-->


<!-- time and login code -->
<div class="spacer"></div>
<table cellpadding="0" cellspacing="2" border="0" width="100%">
<tr valign="bottom">
<!-- Time -->
        <td align="$stylevar[left]" valign="top"><div class="smallfont">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div></td>
<!-- /Time -->        

<!-- member logout -->
<if condition="!$show['guest']">
<td align="$stylevar[right]"><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]"  onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a></td>
</if>
<!-- /member logout -->
</tr>
</table>
<!-- /time and login code -->

<!-- peterska2 side column -->
</td>
<td width="10px"></td>
<td valign="top" width="160px">
<table class="tborder" border="0" cellspacing="$stylevar[cellspacing]" cellpadding="$stylevar[cellpadding]" width="100%" align="center">
$forumhome_sidecolumn_right
</table>
</td>
</tr>
</table>
<!-- / peterska2 side column -->

$footer
</body>
</html>

[Chadi]

Someone please help out

[ddadmin]

Ok, posting your entire page doesn't help either, since there are too many dynamically included elements that I can't see. I'm pretty sure the problem has to do with the width of your tables inside the external files though (ie: tabs1.htm, tabs2.htm etc). Have you tried playing around with those tables' formatting?