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#5008438255297432658 [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
 

There are some lines that start with * or _, is that a typo or are those some sort of hacks?

In any case, the css you provided seems to work better.

I've also changed AnonymousUserControl.ascx and RegisteredUserControl.ascx so that the welcome text and "signed in as ..." are followed by <br/>.  That way, the whole thing doesn't stick out to the left - or be pushed outside of the viewing area - as before.

 
Thanks for your help!