basic blue skin issue - browser width support

I merged basic blue to default so that my default is well, basic blue.

Anyway, when the browser is at 1280 width, everything is fine but when view
under 1024 or 800, the site name is too long so, the search area (the welcome,
login, etc...) is being pushed outside of the browser window, and it does not
create a scrollbar so the user can't even get to it.

 How can I fix this?  I like the L&F of basic blue so I don't want to switch
back to default or any other theme.
I see that CommonTitleBarArea is a td and unfortunately it's got nowrap
attribute assigned to it (the search area td has it too).  I don't know if there
is a way to override that from css or not.

If you will link me to where you're site is... I don't want to load one up
locally 

I've been working on a silky new skin myself and have bested this issue with the
default theme... but havent gotten to play with the basic blue theme in firebug
yet 


 

A link to a screenshot of my work in progress...
http://picasaweb.google.com/rfritts/Silk/photo?authkey=2QhsmbB0bbo#5008438255297
432658 [logo removed...]... must... finish... skin

it is forums.infinityinfo.com.

 Thanks

Ya... as i suspected.  The layout needs some min-width settings. I'll whip the
css up in a jiffy mate 
 Backup your Common.css (in-case i missed something and it breaks) and overwrite
your current settings within the following... 

BODY
{
	margin: 0;
	padding: 0;
	color: #000;
	font-family: Tahoma, Arial, Helvetica;
	min-width: 740px;
	width: auto;
	_width: expression(document.body.clientWidth < 800 ? "740px" :
"auto" );
	margin: 0 auto;
	padding: 0 15px;
	background: #000 url(../images/Common/body-background-gradient.gif) 0px 0px
repeat;
}

.CommonTitleBar
{
	display: block;
	padding: 10px 0;
	margin: 0 20px;
	border-color: #8CAEC9;
	border-top: 0px;
}

.CommonTitleBarSearchArea
{
	width: 100%;
	text-align: right;
	font-family: Tahoma, Arial, Helvetica;
	color: #666;
	padding: 10px;
	margin-top: 5px;
}

.CommonTitleBarTitle
{
	height: 40px;
	width: 250px;
	display: block;
	*width: expression(document.body.clientWidth < 900 ? "250px" :
"auto" );
	padding: 20px 0 0 10px;
	*padding: 0 0 0 10px;
	font-family: Tahoma, Arial, Helvetica;
	font-size: 150%;
	color: #555;
	margin: 0;
	margin-bottom: -5px;
	font-weight: 900;
}


 * I havent gotten to test it out w/ a site description -- so if you use one...
be forewarned.

[Rant]

Having looked at the CSS for that skin... eek.  the centering is just bad...
having 70 pixels reserved [35 each side] for left and right margins to
"center" is just wrong.  Set the size [or min- + max-] of the content,
and set margin: 0 auto; to allow the browser to center it, so margins will
decrease over time... that uses a 100% width on the content... ouch. max-width
100% maybe... but I'm not a fan.

I might have to do a write up on this issue...

On a side rant - why are all of the CS theme css files so wasteful... you don't
need a unit size on 0, many definitions are split up which could be combined
(margin: ... instead of margin-left, margin-right, margin-bottom, margin-top),
etc... It makes kittens cry...

[/Rant]  But I will still probably do a write up