IE 6 Display Error

Star Wars Fanatic

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.

sonam

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

Star Wars Fanatic

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.

sonam

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:

Star Wars Fanatic

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.

sonam

You are welcome. Very Happy

CSS problem in IE 6
Why does Pixels double in IE 6?
IE 7 Review
IE 6 problem (bugs me off)
My Internet Explorer keeps crushing.

Microsoft Confirms 'Highly Critical' IE Hole!!
Copy of IE 6
IE 7 to take a cue from Firefox
*OFFICIAL* Which Browser do you use?
Internet Explorer 7 (beta 2 preview)

IE 6 and IE 7
Java tutorials
Having browser compatibility issues
(official) IE 7 Topic
XHTML, HTML and standards