site not working in IE need assistance. (need compatibility)

Hello,

I'm new to the forum... I came here because I need some help with finding out why my code isn't rendering correctly in IE 6 0r 7.

It renders correctly in every other browser I have tested it in. (Mac and Windows)

in IE7: The div named "nav" does not "float left" for some reason. other than that it renders fine.

in IE6: The div named "nav" does not stay fixed.. although it does float left unlike in IE7. The div named "main" does not align to the top of the page.

What info do I need to tell these browsers for them to render the site correctly? The site renders fine in IE8 and all other versions of chrome, firefox and safari.

Any help is appreciated. thanks.

the link to the "page".

http://www.neterhet.com/test/hscroller/

and my frankencss.

@charset "UTF-8";
/* CSS Document */



body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
margin: 0; padding: 0; border: 0;
}

body {
background: #000000;
font-family: Arial, sans-serif; color: #339966; line-height: 24px;
}

a {
color: #339966; text-decoration: none;
}
a:hover {
color: #669999;
}

#wrapper {
padding: 22px 0 0 0;
float: left;
width: 100%;

}

#container {
width: 100%; margin: 0 auto; overflow: hidden;
}

#nav {
position: fixed; width: 280px; float: left; text-align: right;
}
#nav h1 a {
display: block; width: 160px; height: 163px; margin: 27px 0px 31px 63px;
background: url(http://neterhet.com/uploads/neterlogo_litebrite_grn.jpg) 0 0 no-repeat; text-indent: 9999px;
}

#nav ul {
margin: 0 60px 40px 0; list-style: none;
}
#nav ul li a {
font-size: 24px; line-height: 48px;
}

#nav h2 {
font-size: 16px; font-weight: normal; text-transform: uppercase; letter-spacing: 3px;
margin: 0 60px 9px 0;
}

#main {
width: 600px; float: left; padding: 16px 0 0 300px;
background: #000000;
}

.post {
margin: 0 0 0 0;

}

#footer {
clear: both; overflow: hidden; padding: 5px 0 40px 0;
}

#footer p#back-top {
float: left; font-size: 12px;
}



/* Alignment Stuff */

.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignright {
float: right;
margin-left: 15px;
}

.alignleft {
float: left;
margin-right: 15px;
}

it seems i have worked out most of the bugs except for one final thing...

this is 2 div's in a div. a containing div called "wrapper" with a "nav" div and a "main" div. ("nav" on the left, "main" being the content)

i used an "if" statement for the browser to use a different css for ie 6 and 7.. and was able to get the nav div to go to the left of the screen by removing all references to "float". but for whatever reason. the div named "main" will not sit to the right of "nav". it wants to put itself at the bottom of "nav"...

they should align at the tops. i don't think i'll be able to make "nav" static.. which is fine.. as long as both divs will sit next to each other tops aligned..

if there is another way to fix this that would be great.. i'd lust like to see this work in 6 and 7. as correctly as possible.

http://www.neterhet.com/test/hscroller/

you can view the css below..

(IE 6&7 specific css)

@charset "UTF-8";
/* CSS Document */



body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
margin: 0; padding: 0; border: 0;
}

body {
background: #000000;
font-family: Arial, sans-serif; color: #339966; line-height: 24px;
}

a {
color: #339966; text-decoration: none;
}
a:hover {
color: #669999;
}

#wrapper {
padding: 22px 0 0 0;
width: 100%;
overflow-x: hidden;

}

/*#container {
width: 100%; margin: 0 auto; overflow: hidden;
}*/

#nav {
position: static; width: 280px; text-align: right;
}
#nav h1 a {
display: block; width: 160px; height: 163px; margin: 27px 60px 31px 63px;
background: url(http://neterhet.com/uploads/neterlogo_litebrite_grn.jpg) 0 0 no-repeat; text-indent: 9999px;
}

#nav ul {
margin: 0 60px 40px 0; list-style: none;
}
#nav ul li a {
font-size: 24px; line-height: 48px;
}

#nav h5 {
font-size: 7px; font-weight: normal; text-transform: uppercase; letter-spacing: 3px;
margin: 0 60px 9px 0;
}

#main {
width: 1300; padding: 16px 0 0 300px; background: #000000;
}




#back-top {
float: left; font-size: 12px;
}



/* Alignment Stuff */

.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignright {
float: right;
margin-left: 15px;
}

.alignleft {
float: left;
margin-right: 15px;
}


thanks.

:thumbsup: it shouldn't be this difficult... but i got it working back to 6. the only thing i would pick at is that in IE6 when i scroll the content it scrolls forever! fixing that would be the only thing that would make it perfect. what i did was use "absolute" positioning on both the "nav" and "main" divs. that fixed everything in IE7.. the "nav" div was now stationary. and the "main" div would scroll. but it still didn't work in IE6. THe "nav" div still wanted to scroll with the page. i used this fix, which is a combo of two fixes i found, here is a link to one of them: https://gist.github.com/158243#file_position_fixed.css

* html #nav{
position: absolute; left: 0px; top: 0px;
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

* html,* html body /* IE6 Fixed Position Jitter Fix */{background-image:url(images/blackpixel.jpg);background-attachment:fixed;

}

you can use "target:blank" as the image url instead of "blackpixel.jpg". i had to use it so the background of my page would be black versus white.. as the fix made the background white. "blackpixel.jpg" is simply a 1 pixel black jpg. probably could have used a .gif... oh well. it works.

to make everything work i used "if" statements in the html for IE6 and 7 because the fixes for IE 6 and 7 break everything else. so how it works is my page uses the default css file for styling.. but if it is IE6 or IE7 it uses a second css file to style those pages. that is what is below. it may be a little sloppy, but it works. i was able to use the same style sheet for both IE6 and 7. but if a fix for 6 would have broke 7, then i would have had to have a css style sheet for each. luckily i was able to double up.

(if statements)
<!--[if IE 6]> <link href="style_ie6.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if IE 7]> <link href="style_ie6.css" rel="stylesheet" type="text/css"> <![endif]-->


(css)

@charset "UTF-8";
/* CSS Document */


* { margin:0; padding:0; }

* html #nav{
position: absolute; left: 0px; top: 0px;
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

* html,* html body /* IE6 Fixed Position Jitter Fix */{background-image:url(images/blackpixel.jpg);background-attachment:fixed;

}

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
margin: 0; padding: 0; border: 0;
}

body {
background: #000000;
font-family: Arial, sans-serif; color: #339966; line-height: 24px;
}

a {
color: #339966; text-decoration: none;
}
a:hover {
color: #578F73;
}

#wrapper {
/* padding: 22px 0 0 0;
*/ width: 100%;
overflow-x: hidden;

}


#nav {
width: 280px; text-align: right; position: fixed; top: 20px; left: 0px;
}
#nav h1 a {
display: block; width: 160px; height: 163px; margin: 27px 60px 31px 63px;
background: url(http://neterhet.com/uploads/neterlogo_litebrite_grn.jpg) 0 0 no-repeat; text-indent: 9999px;
}

#nav ul {
margin: 0 60px 40px 0; list-style: none;
}
#nav ul li a {
font-size: 24px; line-height: 48px;
}

#nav h5 {
font-size: 7px; font-weight: normal; text-transform: uppercase; letter-spacing: 3px;
margin: 0 60px 9px 0;
}

#main {
position: absolute; top: 20px; left: 0px; background: transparent;
}




#back-top {
float: left; font-size: 12px;
}



/* Alignment Stuff */

.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignright {
float: right;
margin-left: 15px;
}

.alignleft {
float: left;
margin-right: 15px;
}