Problems with a css navbar

[AdamSayer]

I seem to be having a little trouble implementing suckerfish's drop down nav into a site im doing some work on. I'm basically putting the code behind a design that was made by the client. They wanted the drop down navs, which wasnt really a problem, I just can't seem to get the stupid thing to center on the page.

http://www.alistapart.com/articles/dropdowns

I've posted the page at:

http://www.adamsayer.com/heavens_magic/index.html
(http://www.adamsayer.com/heavens_magic/index.html)
The code for the styl sheet is this:

body {
font-family: arial, helvetica, serif;
font-size: 80%;
padding: 2em;
margin: 0;
list-style: none;
background-color:#FAF9FF;
}

#content {
width: 800px;
background-color: #faf9ff;
padding: 1em 0;
margin: auto;
voice-family: "\"}\"";
voice-family:inherit;
width: 800px;
list-style:none;

}

html>body #content {
width: 800px;
text-align: justify;
}

#nav {
width:auto;
display: block;
text-align:center;
margin-left:auto;
margin-right:auto;
list-style:none;

}

h1 {
text-align: center;
padding: 0 0 0.25em 0;
margin: 0;
}

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

li {
display:block;
margin-left:auto;
margin-right:auto;
float: left;
position: relative;
width: auto;
text-align: center;
cursor: default;
}

li ul {
display: none;
position: absolute;
top: 1em;
left: 0;

background: url(images/linkbg.jpg) repeat;
padding: 5px;

}

li > ul {
top: auto;
left: auto;
}

li:hover ul, li.over ul{
display: block;
}

clear: left

This is really one of my first forrays into CSS, but I feel like I've got a decent grasp on it. Any help is appreciated

[shalom_m]

Either change

#nav {
width:auto;

to

#nav {
width:675px;

Or put in proper padding
Or increase nav bar graphics to 800px

Each of these options will work

[AdamSayer]

Thanks a lot. That worked geat for Firefox. However, it's not really working at all in Internet Explorer 6 or 7. Does IE treat CSS differently, and do you think there might be a work around?

[shalom_m]

Thanks a lot. That worked geat for Firefox. However, it's not really working at all in Internet Explorer 6 or 7. Does IE treat CSS differently, and do you think there might be a work around?
Good question - long answer!
See about a half dozen posts in this forum about this problem.

If you used the 675px solution on the 800px
pad left and right with 62 and 63 px

better still, make width 676 pad left and right with 62

[AdamSayer]

been trying to search through old posts, this just seems to have me thrown for a loop, heh...i may just start from scratch and see if i can get it to work from the ground up, testing it in both browsers as i go.

[shalom_m]

see: http://www.graphicdesignforum.com/forum/showthread.php?t=34965

In your specific case make width 676 padding left and right with 62 should do the trick

[AdamSayer]

I got it! IE(moreso 6.0) just didnt seem to like the way I did it. I built it from the ground up again using "son of suckerfish" and just testing it hardcore in every browser as I went.

[AdamSayer]

sorry for the double post, but here's a fun addition to my problems with IE...now, by the client's request, it also has to be compatible in aol's browser...does anyone even know how i can get AOL Browser???

[shalom_m]

http://downloads.channel.aol.com/browser