Help!! Navigation CSS Hell!!!

[rtc4lyfee]

Our web site is http://www.fhhsbandhome.com/portal/pages/home.php. As you can see our navigation is giving us hell. It doesn't scale with resolutions at all!! On very small resolutions it collapses down and then on larger ones it just expands to the left. You can use a web site such as http://www.anybrowser.com/ScreenSizeTest.html to confirm this. Well this is a serious problem. I've spent hours messing around with the navigation and honestly at this point all I'm asking for is for someone to take the time, sit down, and make the appropriate code changes to make our navigation scale correctly and work correctly in all browsers/resolutions. Thanks!!

P.S If someone could really do this for us, it would be great. We are a high school band who uses our web site for a LOT of issues, and with a broken navigation, that makes our web site useless . Any good help ASAP would be appreciated highly.

[Centauri]

The absolute positioning of the #menu div is causing the problem - let it sit naturally within the table cell (I won't go on about table layouts here ......). Aligning the div to the top of the cell, and applying appropriate margins seems to work :

.navbg {
	background-color: #333333;
	background-image: url(images/navbg.jpg);
	background-repeat: repeat-x;
	height: 63px;
	vertical-align: top;
}

#menu {
	margin:5px 0 0 30px;
	position: relative;
}

The relative positioning is to provide a reference for the absolutely positioned <ul>s.

[sydney_designer]

#menu {
margin:5px 0 0 30px;
position: relative;
}[/CODE]
The relative positioning is to provide a reference for the absolutely positioned <ul>s.[/QUOTE]

Were you trying to create a relatively positioned object inside another object? If so try using padding-left:Xpx; OR use margin-left:Xpx; margin-right:Xpx (etc.). Also, if this were divisions you could try using the float:left; attribute, but I'm not sure this will work for tables (have you considered nesting it inside an object such as a div which won't automatically position a child object in the center)?

Also, the float:left; should remove the need for absolute positioning (it will indicate the the position of the child element is left of the previous element).

[rtc4lyfee]

alright things are almost fixed. I've changed the font to Arial on the Navigation and when I did that and changed the size of the font, it through off the alignment of some stuff. Pleasse check http://www.fhhsbandhome.com/portal/pages/home.php to see what I mean.

[Centauri]

Just adjust the top margin on the menu div to move things down a fraction :

#menu {
	margin:10px 0 0 30px;
	position: relative;
}