ajax tabs and border problem

[chadi]

1) Script Title:
Ajax Tabs Content script

2) Script URL (on DD):
http://dynamicdrive.com/dynamicindex17/ajaxtabscontent/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>



http://aycu01.webshots.com/image/27840/2000292656981522835_rs.jpg (http://allyoucanupload.webshots.com/v/2000292656981522835)
http://aycu20.webshots.com/image/26779/2000293549127821881_rs.jpg (http://allyoucanupload.webshots.com/v/2000293549127821881)
http://aycu36.webshots.com/image/29995/2000230523128693854_rs.jpg (http://allyoucanupload.webshots.com/v/2000230523128693854)

[chadi]

Can I get a little assistance please? :)

Thanks ;)

[chadi]

Just curious if someone can please help me out on this, thanks

[Buzz]

Obviously no one here can specifically track the issue by looking. You need to start by narrowing dow which element is causing the border to repeat. Start by changing one of your border styles to a different color, like red. Then test to see if the red border is repeated. If it isn't change another border color and test again. Once you track down with element is being repeated you should be able to isolate why it's being called repeatedly.

[chadi]

Ok here is the full code.

This is the main page, forumhome template in vbulletin
http://pastebin.com/m3c2bee90

This is the ajax css file
http://pastebin.com/m4f33e51b

This is an example of what the tab html file looks like
http://pastebin.com/m11c19adf

In the css file, if I make the padding 0px (instead of 10px) as shown below, it does not start moving the tables around. Same if I disable borders. BUT, disabling padding down to 0px also crushes the tabs as shown

.contentstyle{
#border: 1px solid #a7aadc;
width: 250px;
margin-bottom: 1em; padding: 0px;
}[img=http://aycu24.webshots.com/image/28903/2001031917142973625_rs.jpg] (http://allyoucanupload.webshots.com/v/2001031917142973625)

If I enable border while keeping the padding at 0px, it multiplies the border by 1px each time I click a tab, therefore the border starts getting thicker. This is very strange.

I also have no idea where that yellow background/right border is coming from on active tab.

[Buzz]

Have you tried applying the contentstyle class to the table rather than the ajaxtab div?