IE6 and IE7 CSS compatibility help!

[jazzdrive3]

I have a Yahoo Store I am working on, and I got it looking just how I want to in firefox.

www.eyeontheballimages.com

But then look at it in IE6 or IE7. The main problem is the links to the top right. Completely screwed up.

I'm a CSS amateur, and the only reason I've gotten this far is because of a heavy use of Firebug, which is a godsend. But since it's a Yahoo Store, I'm forced to do things a bit differently. For instance, the top right links, I had to find a place near the top where I could enter straight HTML in Yahoo's editors, and then move them to where I wanted. Which was fine with a browser that is actually CSS compliant.

Any help would be greatly appreciated!

[jazzdrive3]

Ok, I've done some research and found out about conditional comments. So I've added the following to the end of my header.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iehacks.css" />
<![endif]-->

and uploaded a iehacks.css file. But nothing I do seems to change anything on the site. Anything I'm doing wrong? Thanks.

[jazzdrive3]

Ok. I've actually gotten everything working with both IE7 and Firefox. So far, so good. www.eyeontheballimages.com

However, I cannot for the life of me figure out how to fix IE6. I've tried everything. But the left hand nav-bar is always below the body that is being floated right. I can't fix it.

Here is the relevant code from the main css file.

 
#nav-product {
float:left;
margin-left:-150px;
overflow:hidden;
position:relative;
width:150px;
z-index:100;
}
 
#bodycontent {
float:right;
width:610px;
}
 
 

The overflow property is also not registering on IE6.

Any help would be appreciated.