Can't align my sidebar in IE 6

[JimmyNavio]

I just finished coding up my site, boonkill.com (http://www.boonkill.com) and everything seemed to be just right, but the whole time I was testing with Firefox and IE 7, and wanted to make sure i had all the browsers covered, so I submitted my site to browsershots.org/ (http://www.browsershots.org/) and from this screen shot (http://browsershots.org/png/full/de/dedbbb23e19272b9af88d3fe1c5215e0.png) I noticed that in IE 6 (and older) my sidebar is not lining up. I have tried everything, and i can get it to line up in one or the other (IE 6 or Firefox), but not both.

Here's the code for the sidebar:

<div class="sidebar">
<h2>Latest Posts</h2>
<ul class="list1">
<?
mysql_connect($dbserver,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$count = 15;
$query="SELECT post_title, ID FROM bk_posts ORDER BY ID DESC LIMIT 0, $count";
$result=mysql_query($query);
mysql_close();

for ($i = 0; $i < $count; $i++) {
$title=mysql_result($result,$i,"post_title");
$id=mysql_result($result,$i,"ID");
echo "<li><a href=\"?p=post&amp;id=$id\">$title</a></li>";
}
?>
</ul>
</div>

and here's the css for the sidebar:

.sidebar {
padding:0 0 20px 0;
width:212px;
margin-left:544px;
}

.sidebar p {
margin:20px 0 0 0;
text-align: center;
}

.sidebar h2 {
color:white;
font-size:1em;
margin:20px 0 0 0;
padding:2px;
background-color:black;
}

.sidebar ul.list1 {
list-style:none;
margin:0;
padding:0;
border-bottom:1px solid black;
background-color:#9AD4F6;
}

.sidebar ul li {
display:block;
padding:0;
margin:0;
border-bottom:1px solid white;
}

.sidebar ul li a, .sidebar ul li a:link, .sidebar ul li a:visited {
display:block;
color:black;
text-decoration:none;
padding:2px;
}

.sidebar ul.list1 li a:hover {
background-color:#CBE7F8;
margin:0;
padding:2px;
}

Any help would be much appreciated. Thank you in advance.

[koyama]

Notice that your left column is shifted to the right in IE6. It could be that it is pushing your right contents. I think the problem is this:

The IE Doubled Float-Margin Bug (http://www.positioniseverything.net/explorer/doubled-margin.html)

Try use left padding instead of left margin.

[JimmyNavio]

alright, I'm gonna try those suggestions right now. I'll tell you how it goes.

EDIT: That inline fix didn't seem to help. I am messing with the padding and margins right now, but like i have already said, when i line one up the other falls out.

[koyama]

You're right. While it did fix that your left column are in the same position in both IE6 and FF it didn't correct your right side. Here the problem is this:

The IE Three Pixel Text-Jog (http://www.positioniseverything.net/explorer/threepxtest.html)

Your right column is not floated. I recommend that you float your right column to the left like you did with your left column. Something like this:

.sidebar {
float: left;
padding: 0 0 20px 0;
width:212px;
margin: 0;
}

[JimmyNavio]

wow, that hack worked perfectly. I had to tweek it a little bit, but its all fixed. Here's the code I added for anyone with the same problem:

/* Hide from IE5-mac \*/

* html .maincolumn {
margin-right: 5px;
}

* html .sidebar {
height: 1%;
margin-left: 0;
}

/* End IE5/mac hide */

basically, its a hack just for IE 6 to get rid of those 3 extra pixels and using the main column right margin to align it separately. Thanks again guys. This is my first time here, and I signed up just because of this one damn problem, and I am impressed with your knowledge.