which css hack to use (and how)... tan hack maybe?

[Rhydz]

Hey guys, once again I have issues with IE (don't we all...)

Ok, here is the site: http://theinfamousuk.com/bugged2.htm

Looks great in all browsers except IE. My main issue is with IE6 < and I have a little issue with my footer text being cut off with IE7 + (which I'm sure will get resolved once I sort out earlier versions).

Alright, I've been doing lots of research on CSS hacks, and I'm pretty sure it's to do with widths and stuff being interpreted 'wrong' in earlier versions of IE.

I've tried some CSS hacks that I've read about, but I couldn't get them to work, which means I'm doing something wrong.

(I tried stuff like /width and w/idth, etc...)

Can someone help me out with fixing this problem?

Here are pics and the CSS in my header to make it easier:


<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
text-align: center;
color: #FBFBFB;
background-color: #FFF;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: center center;
}
#container {
width: 680px;
margin: 0 auto;
height: 650px;
padding: 40px 0 15px 0;
}
#banner {
height: 165px;
width: 680px;
}
#navbar{
width:720px;
height:30px;
position: relative;
right: 20px;
}
#sidebar {
float: left;
width: 176px;
padding: 10px 10px 5px 10px;
height: 400px;
background-color: #1b1b1b;
border-left-width: 2px;
border-left-style: solid;
border-left-color: #FE4343;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #FE4343;
}
#content {
padding: 10px 10px 5px 10px;
height: 400px;
width: 458px;
background-color: #0C0C0C;
overflow: auto;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #FE4343;
color: #FFF;
}
#footer {
height: 40px;
background-color: #000;
}
.clearfloat {
clear:both;
height:0;
line-height: 0px;
}
-->
</style>


thanks :)

[Fang]

Remove line-height: 10%; from .footertext

[Rhydz]

The reason "line-height: 10%;" was there was to make the text inside the footer to move up to the middle of my footer BG. It looked fine in all browsers but IE. When I removed this value, all browsers show it the same, but it is not inline with my footer BG anymore. Regardless, I've remove the value as you suggested, I'm sure it will look good once my layout issues are fixed :P ....

...But the main problem I have is that IE 6 and earlier versions are completely messing up my page layout. Have you, or anyone, any ideas or tips or hints on where i can start to fix this problem. I'm sure it has something to do with the width of my #content. I've been trying for 2 days now to fix this problem and I'm at a loss!

I really hope someone can help me out soon :confused: