Title: OMG!!! IE/Mac Grrrrrrrr's!!!!!!!! Plz help...

Ok, ok, this is soooo lame....

Here is my problem (Internet Explorer 5.2.3/Macintosh-OS X):



See that gap?

Compare to this (Safari 1.2.2(v.125.7)/Macintosh-OS X):



I am using a simple two column layout, the text links are in the sidebar div, and the images/text are in the main content div....

Here is HTML code for side-bar links:

Code:
<div id="sidebar-a"><!-- /////////////// BEGIN DIV "SIDEBAR-A" /////////////// -->
<span class="arrow_off">&rsaquo;</span><a href="folio.php?display=3d" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{3D]">3D</a>
<br />
<span class="arrow_off">&rsaquo;</span><a href="folio.php?display=art" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Art]">Art</a>
<br />
<span class="arrow_off">&rsaquo;</span><a href="folio.php?display=audio" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Audio]">Audio</a>
<br />
<span class="arrow_off">&rsaquo;</span><a href="folio.php?display=bitmap" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Bitmap]">Bitmap</a>
<br />
<span class="arrow_off">&rsaquo;</span><a href="folio.php?display=fontography" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Fontography]">Fontography</a>
<br />
<span class="arrow_off">&rsaquo;</span><a href="folio.php?display=interactive" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Interactive]">Interactive</a>
<br />
<span class="arrow_off">&rsaquo;</span><a href="folio.php?display=logotypes" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Logotypes]">Logotypes</a>
<br />
<span class="arrow_off">&rsaquo;</span><a href="folio.php?display=misculaneous" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Misculaneous]">Misculaneous</a>
<br />
<span class="arrow_off">&rsaquo;</span><a href="folio.php?display=photography" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Photography]">Photography</a>
<br />
<span class="arrow_off">&rsaquo;</span><a href="folio.php?display=playground" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Playground]">Playground</a>
<br />
<span class="arrow_off">&rsaquo;</span><a href="folio.php?display=print" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Print]">Print</a>
<br />
<span class="arrow">&laquo;</span><a href="#" class="current" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Vector]">Vector</a>
<br />
<span class="arrow_off">&rsaquo;</span><a href="folio.php?display=videography" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Videography]">Videography</a>
<br />
<span class="arrow_off">&rsaquo;</span><a href="folio.php?display=websites" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Websites]">Websites</a>
<br />
</div><!-- /////////////// END DIV "SIDEBAR-A" /////////////// -->
And the code for my main content div looks like this:

Code:
<div id="content"><!-- /////////////// BEGIN DIV "CONTENT" /////////////// -->
<div class="thumbs65">
	<p  class="l_fl"><a href="#" onmousedown="JavaScript:MM_openBrWindow('img/folio/photography/gm_ps_01/slideshow.php','','width=560,height=675')">
	<img src="../img/folio/photography/thumbs/tn_gm_ps_01.jpg" class="img_border" width="65" height="65" border="0" alt="tn_gm_ps_01.jpg" /></a></p>
	<p><a href="#" onmousedown="JavaScript:MM_openBrWindow('img/folio/photography/gm_ps_01/slideshow.php','','width=560,height=675')">
	The Playground</a></p>
	<p class="under_p6">Description: First time I picked up a camera in years.</p>
	<p>Theme: Stay confined to small playground.
	<br />Notes: none.</p>
	<div class="clear">&nbsp;</div>
</div>

<div class="thumbs65">
	<p  class="l_fl"><a href="#" onmousedown="JavaScript:MM_openBrWindow('img/folio/photography/gm_ps_02/slideshow.php','','width=560,height=675')">
	<img src="../img/folio/photography/thumbs/tn_gm_ps_02.jpg" class="img_border" width="65" height="65" border="0" alt="tn_gm_ps_02.jpg" /></a></p>
	<p><a href="#" onmousedown="JavaScript:MM_openBrWindow('img/folio/photography/gm_ps_02/slideshow.php','','width=560,height=675')">
	The Train Station</a></p>
	<p class="under_p6">Description: My second photo outting in years.</p>
	<p>Theme: Train station.
	<br />Notes: none.</p>
	<div class="clear">&nbsp;</div>
</div>
</div><!-- /////////////// END DIV "CONTENT" /////////////// -->
So, if you are not confused as of yet, here is my CSS:

Code:
/* This is the main container div that holds #content and #sidebar-a: */
#container {
	width: 850px;
	padding: 0px;
	margin-top: 50px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
/* Main content DIV: */
#content {
	margin-left: 270px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-right: 50px;
	padding-bottom: 0px;
	padding-left: 0px;
}
/* Sidebar DIV: */
#sidebar-a {
	float: left;
	width: 200px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 50px;
	margin: 0px;
}
/* Below for links: */
.arrow {
	color: #666600;
	font-weight: bold;
}
.arrow_off {
	color: #333333;
	font-weight: bold;
}
/* And this is for text/images in content DIV: */
div.thumbs65 {
	float:left;
	width: 480px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
}
.l_fl {
	float:left;
	display: block;
	border:0;
	padding-right: 10px;
}
.under_p6 {
	margin: 6px 0 0 0;
}
.img_border {
	border: 1px solid #000000;
}
p { 
	margin: 0;
}
div.clear {
	clear: left;
	height: 0;
	line-height: 0;
}
Hopefully that the above is not too confusing... better yet, hopefully the above is a quick fix!

I did notice that if I put my sidebar-a after my content (in HTML), the content works fine in IE and Safari, but the sidebar links get pushed to bottom of main content DIV.... maybe I should do that and have the sidebar CSS clear right?

Why do the contents of my content DIV get affected by the contents of the sidebar DIV?????

Oh man, please help.....

Thanks
Cheers
Micky