Problems between IE6 and IE7

[cgacfox]

Could someone please look at coloradofoxden.com/atlantica and tell me what the problem is between IE6 and IE7? I don't know if it is in the CSS code or the HTML code. The site looks fine in IE7, Firefox, Opera, and Safari, but IE6 is breaking it. This is driving me nuts, I cannot figure it out. Also if anyone is running IE8, is it broken there as well? I don't want to download 8 yet until I can figure out how to keep 7 running. Thanks.

[cgacfox]

Is there no one that can answer my question? Do I need to maybe use a wrapper div? I have been told not to care about IE6 but there are still many, many people that still use it including my own company...I don't do web design for the company. I am trying to improve my CSS skills and really need the help as I am not that good at it yet so don't know all the hacks and such to get all browsers to work properly.

[greepit]

can u post css code here?

[cgacfox]

Not all the CSS is being currently used. I was trying to have inner sections with borders like the outer section and was fighting for a while to get it to work. So please ignore that code for now. I am also working on setting up data tables using CSS and have not gotten that far. Right now I am just focusing on getting the page to work in IE6 as it does in other browsers.


html {
background:#22220B;
}

body {
width: 985px;
height: 1416px;
margin: 2em auto;
position: relative;
background-image: url(../images/background1.png);
}
* {
behavior: url(../scripts/iepngfix.htc);
}
h1, h2, h3, p, ul{
color:#FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
h1, h2, h3 {
font-weight: bold;
}
h1 {
height:156px;
text-indent: -9999em;
margin: 1px;
background-color: transparent;
background-image: url(../images/atlantica_logo.png);
background-repeat: no-repeat;
background-position: 1em 1px;
}
#epic_logo {
position: absolute;
top: 30px;
right: 1em;
background: transparent url(../images/epic_logo.png) no-repeat;
height: 201px;
width: 200px;
left: 700px;
}
#border_top {
background-image:url(../images/main_frame_top.png);
height: 89px;
}
#inner_top_frame_1 {
background-image:url(../images/inner_top_frame.png);
height: 58px;
background-repeat:no-repeat;
top: 5px;
}
#content_1 {
position: absolute;
top: 300px;
left: 150px;
width: 700px;
}

#content_2 {
position: absolute;
top: 460px;
left: 150px;
width: 700px;
height: 700px;
font: small Arial, Helvetica, sans-serif;
}

#border_middle {
background-image:url(../images/main_frame_middle.png);
height: 1026px;
margin-bottom:0;
}
#inner_middle_frame_1 {
background-image:url(../images/inner_middle_frame.png);
height: 66px;
}
#inner_bottom_frame_1 {
background-image:url(../images/inner_bottom_frame.png);
height: 61px;
}
#inner_top_frame_2 {
background-image:url(../images/inner_top_frame.png);
height: 58px;
background-repeat: no-repeat;
}
div.scroll {
height: 800px;
width: 700px;
overflow: auto;
margin-left: 0px;
scrollbar-base-color: #212008;
scrollbar-arrow-color: #5E5B17;
scrollbar-3dlight-color: #5E5B17;
scrollbar-darkshadow-color: #5E5B17;
scrollbar-face-color: #212008;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #5E5B17;
scrollbar-track-color: #625F17;
}
#inner_middle_frame_2 {
background-image:url(../images/inner_middle_frame.png);
height: 66px;
}
#inner_bottom_frame_2 {
background-image:url(../images/inner_top_frame.png);
height: 58px;
background-repeat: no-repeat;
}
#inner_top_frame_3 {
background-image:url(../images/inner_top_frame.png);
height: 58px;
background-repeat: no-repeat;
}
#content_3 {
position: absolute;
left: 200px;
top: 900px;
right: 200px;
bottom: 500px;
}
#inner_middle_frame_3 {
background-image:url(../images/inner_middle_frame.png);
height: 66px;
}
#inner_bottom_frame_3 {
background-image:url(../images/inner_top_frame.png);
height: 61px;
background-repeat: no-repeat;
}
#border_bottom {
background-image:url(../images/main_frame_bottom.png);
height: 113px;
}
#member_table {

}
#crafting {
color: #FFFFFF;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
}
#teaching {
color: #FFFFFF;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
}
#event {
color: #FFFFFF;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
}

#footer {
clear: both;
font: bold x-small Arial, Helvetica, sans-serif;
color: #FFF;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}

[cgacfox]

Also I find it interesting that IE7 will accept tweaking the scroll bar colors but the other browsers won't. Does anyone know why?

[cgacfox]

I visited the CSS and (X)Html validator at the W3C site and all my code is good. IE6 is somehow breaking it. I give up. I will put a disclaimer on the site stating now to use with IE6. I know there are hacks to get it to work in IE6, but no one seems interested in sharing their knowledge. I hope if I ever land a corporate web position, that they don't expect me to be able to have the site run in IE6 because I won't be able to know what to do. Just in case anyone is interested, the company I currently work for (not in a web position) runs IE6. It is sad but true that there are many that still use it. There are many that still run Win2000 or Win98.