Problem with TypePad banner

[p0intblank]

I'm setting up a blog for a client with TypePad. I've been using this service for a while now, but this is the first blog that is giving me a problem. For whatever reason the banner graphic I designed isn't showing through above the blue gradient. I've inserted all the necessary custom CSS I could find.

Here's the site: http://www.thestorybehindthemusic.com/

Any advice?

 

[angelwatt]

Using Firebug it looks like you define the CSS for #banner-inner in 3 spots; lines 16, 109, 944 in style.css. The two later ones create a background with the blue gradient. I'm guessing you want to get rid of that so you can delete those lines.

 

[p0intblank]

Using Firebug it looks like you define the CSS for #banner-inner in 3 spots; lines 16, 109, 944 in style.css. The two later ones create a background with the blue gradient. I'm guessing you want to get rid of that so you can delete those lines.

Thanks for the reply. I am only seeing one indication of #banner-inner within the custom CSS code. This is what I have to work with:

#banner { height: 122px; background-image: url(http://www.thestorybehindthemusic.com/images/header_01.png);
background-position: 0px 0px; background-repeat: no-repeat; }

#banner-inner { overflow: visible; padding: 0; } #banner-header { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #banner-header a { display: block; left: 0; top: 0; height: 122px; text-indent: -1000em; } #banner-description { overflow: hidden; width: 0; height: 0; margin: 0; padding: 0; text-indent: -1000em; }


/* three-column tweaks */

	.layout-three-column #container
	{
		width: 980px;
	}

	.layout-three-column #alpha
	{
		width: 123px;
		
	}

	.layout-three-column #alpha-inner
	{
		border: 0;
		padding: 15px 15px 15px 15px;
		background: #FFFFFF;
	}

	.layout-three-column #beta
	{
					width: 600px;
		
		
	}

	.layout-three-column #beta-inner
	{
		border-left: 1px solid #000000;
		padding: 15px 15px 15px 14px;
		background: #FFFFFF;
	}

	.layout-three-column #gamma
	{
		width: 160px;
		
	}

	.layout-three-column #gamma-inner
	{
		border: 0;
		padding: 15px 15px 15px 15px;
		background: #FFFFFF;
	}

I can't figure out where this blue gradient is coming from; at least from the look of this code.

 

[angelwatt]

See this file: http://www.thestorybehindthemusic.com/.shared/themes/jim/magnetic/styles.css and then search for "url(header-bg-2.gif)" it exists in two spots.

 

[nuxx]

You are using an external style sheet with a URL of http://www.thestorybehindthemusic.com/style.css. In this style sheet you are using an @import directive to import three other external style sheets.

One of these, http://www.thestorybehindthemusic.com/.shared/themes/jim/magnetic/styles.css, has two selectors for #banner-inner, like so;

#banner-inner {
    background: url(header-bg-2.gif) repeat-x 0 0;
    height: 90px;
    padding: 30px 40px 0 40px;
}

#banner-inner {
    background: url(header-bg-2.gif) repeat-x 0 0;
}

The background declaration is where the blue gradient is coming from.

 

[p0intblank]

As far as I can tell, there's no way to directly edit the style.css code within TypePad. Unfortunately there's no FTP support. Maybe I can add my own custom CSS to hide the background?

Edit: Well I got it working, but now I can't seem to hide the blog's title, even after inserting the usual code. That's okay, though; I can figure it out from here. Thanks for the help, everyone! I appreciate it.

 

[p0intblank]

Okay, so I'm not done after all. Now the container's widths aren't working properly. This is the code I used to hide the gradient background:

#banner-inner {
    background: url() repeat-x 0 0;

I simply removed the background's URL within the source and that seemed to work. However something went wrong with the widths. Any idea why this happened?

 

[nuxx]

However something went wrong with the widths

You omitted the closing brace for the selector. It should be (I've also taken the liberty of changing the code);

#banner-inner {
    background-image: none !important;
}

To be honest the CSS is a bit of a mess. There are numerous duplicate selectors with both duplicate and additional declarations. If you have no other way but to use duplicate selectors and declarations consider using !important like I have. These declarations stand a better chance of taking precedence when the styles cascade.

 

[p0intblank]

You omitted the closing brace for the selector. It should be (I've also taken the liberty of changing the code);

#banner-inner {
    background-image: none !important;
}

To be honest the CSS is a bit of a mess. There are numerous duplicate selectors with both duplicate and additional declarations. If you have no other way but to use duplicate selectors and declarations consider using !important like I have. These declarations stand a better chance of taking precedence when the styles cascade.

Thank you! You've been such a big help. I've learned a lot through this process, so thanks again.