I'm making a webpage that I want styled with CSS and to display as close to correctly as possible in both IE and Firfox. Presently my webpage is displaying perfectly with firefox, but I'm getting a lot of crap from IE. In IE, for some reason, the last two characters of any text in the right margin of my page gets displayed weird. Once correctly where it should be and another time in my footer section (look at the image). It's like ghost text or something because in IE whenever I highight it in the footer, it also highlights the text in the right margin. I'm guessing it's some kind of bug. Also, IE puts in space between some of the <div>'s that's not supposed to be there which totally messes up my page theme. Perhaps it will be better displayed with an image comparing renders of IE on the top to FF on the bottom. I used red to indicate all the problems IE is making for me.

I hope there is some way to work around this. Having a page that only displays correctly in FF could be a problem for most people.

Finally, here is my HTML code:
<!--Beginning of main container-->
<div class="container">
<!--Header section-->
<div class="header">
<img src="head.png" width="800" height="125" alt="LincolnXC.tk" />
</div>
<!--Left Margin Section-->
<div class="left">
--Sample Text (Left Margin)--
</div>
<!--Main Body Section-->
<div class="body">
--Sample Text (Main Body)--<br />
--Sample Text (Main Body)--
</div>
<!--Right Margin Section-->
<div class="right">
--Sample Text (Right Margin)--
</div>
<!--Footer Section-->
<div class="footer">
--Sample Text (Footer)--
</div>
</div>
<!--End of main container-->

And my CSS code:

div.container {
background-image: url(bg.png);
width: 800px;
margin-left: auto;
margin-right: auto;
border-color: #bfbfbf;
border-style: solid;
border-left-width: 2px;
border-right-width: 2px;
border-top-width: 1px;
border-bottom-width: 1px; }

div.header, div.footer {
text-align: center;
clear: both; }

div.left {
float: left;
border-color: #bfbfbf;
border-style: solid;
border-left-width: 0px;
border-right-width: 2px;
border-top-width: 0px;
border-bottom-width: 1px; 
width: 148px; }

div.body {
float: left;
border-color: #bfbfbf;
border-style: solid;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-bottom-width: 1px; 
width: 498px; }

div.right {
float: left;
border-color: #bfbfbf;
border-style: solid;
border-left-width: 2px;
border-right-width: 0px;
border-top-width: 0px;
border-bottom-width: 1px; 
width: 150px; }

Can anyone help me please?

Duplicate characters are caused by comments <!--comment--> placed inbetween floated elements. Dup Characters

The odd breaks are where IE renders whitespace incorrectly (probably because of the comments in this case)

Thanks chris, your suggestion about that bug was correct and the duplicate characters went away now. I'm still working on getting rid of the whitespace that isn't supposed to be there in IE, so I still need some help on that. When I switched around the comments it fixed the character bug but not the extra whitespace.

Where is the whitespace appearing?