Space under my navbar

Hey, got a question. Here’s my web page:

http://www.kneo.org/calendar/about/staff.html

It’s not “open to the public” yet, it’s only accessible by just typing in that link. But as you can see, I have a bit of space between the navbar and the rest of the page’s content. How can I get rid of that space?

any help is super-appreciated, thanks!

Hi.

Your navigation bar is that tall. Give any one of those td’s in your menu an ugly background colour and you’ll see right away why your menu has space under it. It’s not space at all.

This is actually what tables do and why a pure unordered list would work better: a table MUST contain its children. And if one child td in a row is very tall because it has a lot of stuff inside it, then all its row-mates will also be the same height too. And that’s what they’re doing now.

The divs inside have visibility: hidden. While this makes an element invisible, it does not prevent it from actually still taking up space on the page. It’s still there, you just don’t see it.

Have you considered a Sons of Suckerfish dropdown?

dude, thanks, i got the suckerfish dropdown working…it doesn’t look pretty yet, but at least it’s working.

my next issue- and this may not be an html problem- is that when I resize the browser window, my navbar gets all screwed up. how do i stop this from happening?

once again, thank you to the above poster!

You’d probably have to set a ‘width’ for the ‘nav’ container in the CSS itself as obviously it will automatically flow and wrap the images when the browser window is narrowed.

it worked, and I figured out how to get it centered instead of positioned via padding. Thanks again :slight_smile:

No worries, glad it helped but really you should be using CSS for layout rather than TABLE elements. Thought I’d tell you before somebody else here bites your head off.

I noticed it was mostly just the menu in a table for whatever reason, so I didn’t say anything.

Sometimes we do use a table (or better yet, display:table) to take advantage of the fact that tables must enclose all their children and that all cells in a row will make their heights match the height of the tallest row-mate. Though for a dropdown it makes zero sense for exactly these reasons. Whoever thought up the original menu probably relied on Javascript to undo the table’s properties.