CSS inline display looks funky! -also AJAX question?

First, here is the content in question:

http://choiceconcessions.com/index.html.

I translated Illustrator exported tables into divs, and now I can't make the top navigation (why Choice?, menus, our story, contact) stay in one line, with no break between the header or on either side.

I know it's something simple, but I've been messing with it for hours and can't make it work!

Thanks in advance :confused:for pointing me in the right direction-
Jessica

oops- Nevermind that AJAX question.. one thing at a time!!!


body,
html {
margin:0px;
padding:0px;
border:0px;
background-color:#0078ff0
}
p, ul, ol, li {
font : 10pt Arial,geneva,helvetica;
}
h1 {
font : bold 14pt Arial, Helvetica, geneva;
}
h2 {
font : bold 12pt Arial, Helvetica, geneva;
}

#wrap {
width:1200px;
margins:1 auto;
background:#99c;
}

#header {
position:relative;
width:1200px;
}

#topnavigation {
margin:0;
padding:0;
float:left;
width:1200px;
}

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

#nav li {
display:inline;
padding:0px;
margin:0px;
float:left;
width:auto;
}

#content {
float:left;
width:915px;
padding:10px
background:#c9c;
}

#rightnavigation {
float:right;
width:285px;
background:#9c9;
}

#footer {
clear:both;
background:#cc9;
}

I translated Illustrator exported tables into divs, and now I can't make the top navigation (why Choice?, menus, our story, contact) stay in one line, with no break between the header or on either side.

I know it's something simple, but I've been messing with it for hours and can't make it work!By default, browsers give ul elements non-zero margin-top, margin-bottom, and padding-left values to create space above and below the list and accommodate the list's bullets.

You need to set those values to zero on the ul#nav element either directly or by specifying a default rule. To do so directly, you might use the following code:

ul#nav { margin: 0; padding: 0; }

To do so using a default rule, you might use the following code:

* { margin: 0; padding: 0; } /* selects every element */

Thank you!
I thought I had it here, but I had to change #nav ul to #topnavigation ul to make it work! So simple!

Thank you!
I thought I had it here, but I had to change #nav ul to #topnavigation ul to make it work! So simple!

I realize you've got it working, but just to clarify since you thought you had it already... You had:


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


which is different from:

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


In your html, you use the #nav id like this:

<ul id="nav">

So the second CSS style above is what you want. The first was accomplishing nothing.

Dave