Okay, just learning css as you will soon see. This is the beginning of my first "official" css site.

I'm trying to layout the navigation, and my UL is not acting like a list. Can someone please look at the following test site and take a gander at the css and let me know where I'm missing it. I'm sure I'm missing it a lot, but any help would be greatly appreciated.

In addition, I don't see where I specified list-style-type as none (yet, that IS the effect I want to achieve). I just want to understand the "whys and why nots" of what I am doing and this stuff is making me crazy.

Here's the link:
http://www.carolinaorthopedics.com/test/index.html

THANKS!!!

Take out the display:inline - you only need to use that if you want a HORIZONTAL list:

div#headNav ul, li {
padding: 3px 15px;
list-style: none;
/*display: inline;*/ <-- remove
}

You also need to CLEAR your floats, otherwise the list will flow out of it's container: http://css-discuss.incutio.com/?page=ClearingSpace

I would also recommend that you NOT use font sizes of small, medium, large because of the differences in the way browsers use those sizes. Better to use % or em units for font sizing.

Originally Posted by LadynRed

Take out the display:inline - you only need to use that if you want a HORIZONTAL list:

div#headNav ul, li {
padding: 3px 15px;
list-style: none;
/*display: inline;*/ <-- remove
}

You also need to CLEAR your floats, otherwise the list will flow out of it's container: http://css-discuss.incutio.com/?page=ClearingSpace

I would also recommend that you NOT use font sizes of small, medium, large because of the differences in the way browsers use those sizes. Better to use % or em units for font sizing.

I'm probably extremely confusing on my naming conventions, so I'll need to work on that - but I need the display: inline under the headNav because that refers to my "home, location and contact cosm" that runs across the top of the page.

My problem comes in with what is contained in the "mainNavWrapper" that holds the divs "services, physicians, etc".

However I may have figured out the problem. I just needed to place a "display:block" for that ul, li, and that did the trick.

The "small" font size was my very first experiment with that. I got that from a book I am reading, I forget which (Transcending CSS, Head First HTML w/CSS & XHTML, or HTML Dog). Their explanation was that if I set "small" under the body tag and then set percentages for the rest, if the client wants a larger text size, all I'll need to do is go in and change "small" to "medium" or "large" and the other percentages will adjust automatically.

Being a newbie, sounded reasonable to me, but I'm open to all the real world suggestions I can get.

Thanks so much for your comments.

My problem comes in with what is contained in the "mainNavWrapper" that holds the divs "services, physicians, etc".

Yes, that was quite obvious.

Oh, and it is not generally necessary to precede every ID with the "div"
div#headnav
Just using #headnav would be sufficient 99% of the time.

Thanks so much for your comments and suggestions. It's nice to have a place to come when I am literally pulling my hair out!

Thanks!

You're welcome, I know the feeling