Help with inline lists for horizontal navigation

[BigBlueBall]

I'm working on an update to my site header using no tables and lists for the navigation. It renders great in both IE 6 and Opera, but breaks in Firefox.

Here is a link to the test page: http://old.bigblueball.com/v3/test.htm
and the CSS file: http://old.bigblueball.com/v3/default.css

In Firefox, the for the advertisement is 10 pixels to tall and wide, and the second row of navigation links are positioned about 10 pixels too low.

I'm stumped as to why. I've used absolute positioning and specified the size for both of those elements, and as I said, they render perfectly in both IE and Opera.

Any CSS experts here care to point me in the right direction?

[DaveSW]

Not sure if this relates to your problem but add padding: 0; to the html part of the css file.

Then you have a number of validation issues:
http://validator.w3.org/check?uri=http%3A%2F%2Fold.bigblueball.com%2Fv3%2Ftest.htm
no doctype - http://www.webdevfaqs.com/html.php#doctype

marginwidth and marginheight in your body tag can come out once you have added the padding thing as above.

you can't have a p tag inside a span tag. p is block level, span is inline. span should be inside the p tag.

Then your CSS: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fold.bigblueball.com%2Fv3%2Fdefault.css&usermedium=all
You appear to have omitted your units on the last three lines of #banner

Also on #networkbar bottom-border should be border-bottom.

Then when you've got it all validating see if you still have any problems.

[BigBlueBall]

Thanks Dave. It all validates now, but the problem persists. It appears that the problem is the "broken box model" used by IE, where padding and borders are inside the DIV boundaries rather than outside.

I used a nested DIV for the banner to add the 4px padding, and now that is properly rendering in all Firefox, IE and Opera.

But I'm still stumped on the second navigation line. It displays properly in both IE and Opera, but still too low in Firefox. Here is the snippet from the CSS:

#nav-one {
 	position: absolute;
 	left: 97px;
 	top: 101px;
 	padding-top: 4px;
 }
 #nav-one ul {
 	list-style: none;
 	margin: 0;
 	padding: 0;
 }
 #nav-one li, p {
 	display: inline;
 	font-size: 90%;
 	font-weight: bold;
 	padding-left: 10px;
 	}
 #nav-one a {color: #FFFFFF; text-decoration: none; }
 #nav-one a:hover {color: #FFFFFF; text-decoration: underline;}
 
 #nav-two {
 	position: absolute;
 	left: 57px;
 	top: 130px;
 	height: 18px;
 }
 #nav-two ul {
 	list-style: none;
 }
 #nav-two li {
 	display: inline;
 	font-size: 90%;
 	padding-left: 10px;
 }
 #nav-two a {color: #000000; text-decoration: none; }
 #nav-two a:hover {color: #31329C; text-decoration: underline;}

nav-two is the second line of the navigation.

[BigBlueBall]

UPDATE:

It's all fixed now.

I had to add the margin and padding as follows:

#nav-two ul {
 	list-style: none;
 	<strong>margin: 0;</strong>
 	<strong>padding: 0;</strong>
 }

Thanks again for your advice.

[DaveSW]

no problem - I'm glad you fixed it.
If you have any further box model problems then try my simple way of avoiding them:

Nest two elements, apply the width to the container, and then apply your padding/margins etc to the inner one. if you use a block level element like a div then the inner one will automatically take the width of the outer one, and correctly apply your margins.

[sch3dana]

Hi All,

I found this thread on a google search and it seems to be related to my question. I am using two horizontal lists for my main and sub navigation. It works across the major browsers, but when pages load slow, sometimes the list do not appear horizontal, but rather in the default vertical list style, breaking the entire look of the site. I imagine there is a simple fix, but I'm not sure what it would be. Does anyone know what could be causing this? My site is the housebreaking bible dot com, but the problem will only show some of the time. I sure would appreciate any help. I can also switch the entire site to a different kind of navigation if that is necessary.

Thanks, Dana

[MidiMagic]

One problem is that IE and FF render surrounding styles (margin, border, padding) differently with respect to defined sizes (width, height). FF puts the surrounding styles outside the defined sizes. IE crams them inside.

The trick is to nest two tags, one with surrounding styles, and one with defined sizes.