My b2evolution Version: 2.x

hello! i'm pretty new to this forum but i've been a longtime fan as i peruse through for tips and tricks!

however, i'm having a really frustrating problem with a blog that i am currently designing..

my template utilizes floating columns.

everything looks great on my PC in both Mozilla and IE6..
it even looks fine on a MacBookPro in Mozilla.

but for some reason the center column is truncated when I use MacBooks!? (on Mozilla)

i've searched throughout this forum and others around the web and i've just come to a deadend.. so i thought i'd ask the pro's directly!

this is my stylesheet (i've removed a lot except for the basic structure div classes..)

div#wrapper {
	background:#cccc99;
	width: 1000px;
	margin: 0 auto;
	padding: 0;
}

div#MainPage{
	background:#cccc99;
	width: 1000px;
	margin: 0 auto;
	padding: 0;
}

div.pageHeader {

	background: url(img/HomeHeader.jpg) no-repeat bottom center;
	width: 1000px;
	height: 140px;
	border-left: 1px solid;
	border-right: 1px solid;
}

div.pageHeaderLinks {
	background: #990000;
	border: 1px solid;
	width: 1000px;
	height: 30px;
}

/*Left of Post Box*/
.bSideBar {

	width: 230px;
	float: left;
	position:absolute;
	overflow: hidden;
	border-left: 1px solid;
	/* background: #900; */
}

/*Right of Post Box*/
.bChatBox {
	position: relative;
	width: 280px;
	float: right;
	padding: 10px 10px 10px 10px;
	background-color:#CCCC99;
	border-right: 1px solid;
}

.bPosts {
	margin-left: 230px;
	margin-right: 280px;
	overflow: hidden;
}

here's my template (again, i've removed all of the php code and lots of the excess tags for readability)

<div id="wrapper">


<div class="pageHeader">
</div>

<div class="pageHeaderLinks">

		<table id="Table_01" width="1000" height="30" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<a href="http://www.bulgeacrossamerica.com/home.php">
				<img src="/../../../images/home.jpg" width="78" height="30" border="0" alt=""></a></td>

		<td>
			<a href="http://www.bulgeacrossamerica.com/about.php">
				<img src="/../../../images/about.jpg" width="84" height="30" border="0" alt=""></a></td>
		<td>
			<a href="http://www.bulgeacrossamerica.com/bio.php">
				<img src="/../../../images/bio.jpg" width="51" height="30" border="0" alt=""></a></td>
		<td>
			<a href="http://www.bulgeacrossamerica.com/photos.php">
				<img src="/../../../images/photos.jpg" width="96" height="30" border="0" alt=""></a></td>

		<td>
			<a href="http://www.bulgeacrossamerica.com/videos.php">
				<img src="/../../../images/videos.jpg" width="90" height="30" border="0" alt=""></a></td>
		<td>
			<img src="/../../../images/header-blankspace.jpg" width="220" height="30" alt=""></td>
		<td>
			<a href="http://www.bulgeacrossamerica.com/alwin.php">
				<img src="/../../../images/alwin.jpg" width="77" height="30" border="0" alt=""></a></td>
		<td>

			<a href="http://www.bulgeacrossamerica.com/bryce.php">
				<img src="/../../../images/bryce.jpg" width="81" height="30" border="0" alt=""></a></td>
		<td>
			<a href="http://www.bulgeacrossamerica.com/carl.php">
				<img src="/../../../images/carl.jpg" width="73" height="30" border="0" alt=""></a></td>
		<td>
			<a href="http://www.bulgeacrossamerica.com/joey.php">
				<img src="/../../../images/joey.jpg" width="66" height="30" border="0" alt=""></a></td>
		<td>

			<a href="http://www.bulgeacrossamerica.com/peter.php">
				<img src="/../../../images/peter.jpg" width="84" height="30" border="0" alt=""></a></td>
	</tr>
</table>

</div>

<div id="MainPage">

<!-- ==================== START OF LEFT SIDEBAR ===================== -->
<div class="bSideBar">


</div>

</div>

<!-- ============= START OF RIGHT SIDEBAR ==========

<div class=”bChatBox”>

</div>




<!-- =============== START OF MAIN AREA =============== -->
<div class="bPosts">


</div>




</div>

please yell at me if i've screwed something up royally or if you need me to post more of the code.. :)

i can't thank you guys enough! i'm just at a loss of what to do now..