CSS horizontal tabbed menu problems

[GreenNick]

I am trying to get my tabbed navigation to work correctly. I'm a bit new with CSS, so forgive me if I am doing something completely idiotic.

My two problems:

1) I can't figure out how to float the tabs at the bottom of the header. If you change font sizes, you will see that the tabs will either leave a gap if they are made smaller, or break the layout if they are larger. I want them to always align with the bar underneath.

2) For some reason (likely similar to the above issue), when you click on a tab a scroll bar appears. Not sure why this is.

Here is the development site link:
http://www.georgestreetcoop.com/newsite/index.html

Any thoughts? Thanks!

[crowden]

for 2) I'd guess the reason is because you have the overflow: auto; assigned to it.

That'll give you the scroll bars.

[GreenNick]

Thanks! I switched out the overflow:auto for overflow:hidden, and that eliminated the scroll bars.

I'm still having trouble aligning the tabs at the bottom of the header, so that they don't break the layout when the text is resized.

Here is an example I found of a site that has tabbed navigation that stays floated at the bottom when you resize text:
http://www.verticalresponse.com/

I'm probably missing something completely obvious, but I'm pretty new with CSS and I have had no luck.

-Nick
http://www.georgestreetcoop.com/newsite/

[GreenNick]

I've attached an image showing the issue I am having. Any thoughts? It's probably something really basic, but I'm new with this CSS craziness.

Thanks,
Nick

[Paul O'B]

Hi,

I would place the tabs absolutely at the bottom of the header because the header is fixed in pixel height and therefore will not grow anyway.

e.g.

div#header{position:relative;width:720px; height: 180px; margin:0 auto; background-image: url('http://www.georgestreetcoop.com/newsite/images/header.jpg'); background-repeat: no-repeat}



/*------------- Main Navigation ---------------*/

#tabsC	{
    position:absolute;
	left:0;
	bottom:0;
	padding: 0px 0px 0px 10px;
	margin-left: auto;
	margin-right: auto;
	font: bold 1.3em Arial, Helvetica, sans-serif;
	line-height:normal;
	} /* displayed at 16px */

That will scale up and down in ie without problem.

[GreenNick]

It worked!

Paul, I see now why you were the CSS Guru of 2005. You've got my vote for 2006 already. Thanks!