CSS Disaster in IE; Placement of navigation and content is wonky

I'm trying like heck to wean myself off of using tables, but it sure isn't easy, especially when weird problems such as I'm having are happening.

I'm trying to use the CSS styling for the navigation in the middle of the page (the set that starts with "Chevalia Home" and ends with "Blog". While I am still learning this technique, through trial and error I got it to work in Firefox and Safari. But when I checked it in IE I was dismayed to see the navigation bar pushed over to the right.

I'm also trying to use a jquery scrolling effect and, again, works fine in FF and Safari, but it has the same issue when viewing in IE...pushed over to the right. Except if you start to use the navigation for the scrolling content, it then will position itself correctly.

I'm a newb, so I'm not sure what exactly to post, but here's the link for the page: http://www.chevalia.net/chevalia/index2.html

And here's the code that I'm using for the navigation:
#nav-home {
width:999px; height:92px;
position:relative;
z-index:5000;
}

#nav-home-wrap {
}

#nav-home ul {
margin: 0; padding: 0;
list-style: none;
position:absolute;
}

#nav-home li {
margin: 0; padding: 0;
float: left;
}

#nav-home a {
height:92px;
float: left;
display:block;
overflow:hidden;
text-indent:-999em;
background:url(images/bg-nav-chevaliahome.jpg) no-repeat;
}

#nav-home a#nav-chevalia-home {
width:166px;
background-position: 0 0;
margin-left:0;
}

#nav-home a#nav-chevalia-home:hover {
background-position: 0 -92px;
}

#nav-home a#nav-cast {
width:136px;
background-position:-166px 0;
}

#nav-home a#nav-cast:hover {
background-position:-166px -92px;
}

#nav-home a#nav-gallery {
width:123px;
background-position:-302px 0;
}

#nav-home a#nav-gallery:hover {
background-position:-302px -92px;
}

#nav-home a#nav-video {
width:154px;
background-position:-425px 0;
}

#nav-home a#nav-video:hover {
background-position:-425px -92px;
}

#nav-home a#nav-store {
width:214px;
background-position:-579px 0;
}

#nav-home a#nav-store:hover {
background-position:-579px -92px;
}

#nav-home a#nav-sponsors {
width:134px;
background-position:-793px 0;
}

#nav-home a#nav-sponsors:hover {
background-position:-793px -92px;
}

#nav-home a#nav-blog {
width:72px;
background-position:-928px 0;
}

#nav-home a#nav-blog:hover {
background-position:-928px -92px;
}


Also, I can post the code for the jquery scrollable if people want. The actual website for the coding is here: http://flowplayer.org/tools/scrollable.html. I should also mention, that I will eventually be trying to combine both the horizontal AND vertical scrolling techniques, but right now, only the horizontal one is working.

And yes, there are two tables in the design. Don't kill me, okay? ;) Like I said, I'm trying to wean myself off. But when stuff like this happens..well, it makes me want to run back to all that is familiar :D

Thank you in advance for any advice.

I'm trying to use the CSS styling for the navigation in the middle of the page (the set that starts with "Chevalia Home" and ends with "Blog". While I am still learning this technique, through trial and error I got it to work in Firefox and Safari. But when I checked it in IE I was dismayed to see the navigation bar pushed over to the right.

Try getting rid of that ap on your ul. Like this -
#nav-home-wrap {
}

#nav-home ul {
margin: 0; padding: 0;
list-style: none;
}

#nav-home li {
margin: 0; padding: 0;
float: left;
}

Ahh! That worked. Thank you!

And I also fudged around with my scrollable CSS. There was a position:absolute in there. I changed it to relative and that fixed the positioning problem, BUT there's still an issue. And only in IE again. When I click on "The Show" link, that content slides over horizontally like it should, but it doesn't scroll vertically like it should. There is a big gap between the "The Show" heading and the bottom of the curtain. In FireFox it works correctly...scroll down to see the bottom of the text, scroll up and it stops at the bottom of the curtain. In IE, "The Show" scrolls down until it ends half way down the page. Is this related to my CSS again?

Here's the code for the scrollable section:

#flowtabs {

/* dimensions */
width:425px;
height:31px !important;
margin:0 !important;
padding:0;

/* IE6 specific branch (prefixed with "_") */
_margin-bottom:-2px;
}

/* single tab */
#flowtabs li {
float:left;
margin-left:7px;
padding:0;
text-indent:0;
list-style-type:none;
}

/* a- tag inside single tab */
#flowtabs li a {
display:block;
height: 31px;
padding:30px 12px 10px 0;
margin:0px;

/* font decoration */
text-align:center;
text-decoration:none;
}


/* style for horizontal flow */
#flowpanes {height:468px; width:924px; position:relative; overflow:hidden; clear:both;}
#flowpanes ul.items {width:20000em; position:relative; clear:both; margin:0; padding:0;}
#flowpanes ul li {float:left; display:block; width:924px;}

/* style for vertical flow */
/* root element for scrollable */
#scrollvert {
/* required settings */
position:relative;
overflow:hidden;

/* vertical scrollers have typically larger height than width */
height: 450px;
width: 924px;
}

/* root element for scrollable items */
#scrollvert ul {
position:relative;

/* this time we have very large space for height */
margin:0;
padding:0;
}

/* single scrollable item */
#scrollvert ul li {
margin:0 0 0 0;
padding:0 0 0 0;
font-size:12px;
height:auto;
display:block;
}



Also, does anyone know how to get the vertical scrolling to work for more than just one section? I've tried just about everything I can think of. Or does this need to go over to the Javascript forum?

Thanks so much!