IE 6 Display Error

I have a display error in IE 6.
The first error is shown in this screenshot of the page in IE 6:
http://www.swf.frih.net/template4richard/ie_display.png

Many of the borders have a gap between the top part and the middle and the bottom.
It should look like this screenshot in Firefox:
http://www.swf.frih.net/template4richard/ff_display.png

I need there to not be a gap, obviously. I'm not sure why it is like that, and any help would be greatly appreciated.
The link to the page is here:
http://www.swf.frih.net/template4richard/index.html
The css is here:
http://www.swf.frih.net/template4richard/template.css

Thanks for any help or suggestions you have.

Edit: The original problem is fixed, and a new one seems to have evolved, see this post for details.

Hmmm, I don't see some codding mistake. Maybe IE6 stratch verticaly your border_top and border_bottom class. In that case try to change background-position: 0 100%; for top (will put your image on bottom of div), and background-position: 0 0; for bottom (will put your image on top of div).

Second, try to define font size for top and bottom on 1px. IE7 and FF use empty div if you are not type anything inside. But (if I have good memory) IE6 automaticaly insert cursor and define line height independent of your font height (it is 14px for body what mean for all).

If this not solve your problem, then try to define border for top and bottom id just to see how that look in browser. This will show you is it problem in margins, paddings or in content div.

Sonam

It was the font size, thank you very much, Sonam, and I'll have to keep that in mind for the future.

Now a small new problem seems to have arisen, and I think I know the cause, just not how to fix it.
In every browser but IE 6 the tops of the two columns are not displayed on one line evenly.
The sidebar is off by a good 6 or seven pixels down. Now, I think it has to do with the fact that I have a background image that I'm displaying for the sidebar. What's got me wondering is the fact that IE 6 happens to display that properly, and how I can change it for the other browsers, and not break it in IE 6.
Now I could just set a margin on the right side content for 6 or so pixels, but that breaks it in IE. I've tried clearing margins, padding, font sizes, and nothing seems to be working.
Any help with this new problem is appreciated.

I see problem but I am not sure how to solve it. Try to insert one line in content or sidebar id (or maybe both) for display:

I had to use the second part to get it, but that did the trick, thanks for your help, Sonam. I appreciate it.

I also did change the footer, I had forgotten about it.

You are welcome. Very Happy

*OFFICIAL* Which Browser do you use?
IE 7 to take a cue from Firefox
(official) IE 7 Topic
IE 7 Review
IE 6 problem (bugs me off)

Internet Explorer 7 (beta 2 preview)
My Internet Explorer keeps crushing.
Java tutorials
IE 6 and IE 7
Having browser compatibility issues

Microsoft Confirms 'Highly Critical' IE Hole!!
Copy of IE 6
Why does Pixels double in IE 6?
CSS problem in IE 6