Header image partially hidden behind page content

**brennon** · 13 Apr 2007, 05:12 PM

When vieiwing my store for the first time on a MS Vista equipped computer via IE 7, I found that the bottom of the header image is obscured by the primary page content (partial screen capture attached).

It did not appear this way before, and it does not appear this way when viewed on a Windows 2000 machine with IE 6.

Anyone seen this before or know how to fix it?

FYI, store URL is www.snotspotgear.com/spotstore

**brennon** · 16 May 2007, 05:53 PM

Since no one has replied to this post, does that mean I'm alone in experiencing this problem? Doesn't anyone have even a clue what might be going wrong?

**Sketchy** · 16 May 2007, 07:00 PM

It's always a bad idea to make the original mini ZC logo into a full size banner. You could have used your banner as the actual header background and made a transparent gif of your size choosing to replace the mini ZC logo.. still making your banner clickable. That's neither here nor there now.

The basis of the problem is that your logo size overrides the header logo wrapper itself. Simple adjustment in your current template's stylesheet.css

Locate:

Code:

#logoWrapper{
	background-image: url(../images/header_bg.jpg);
	background-repeat: repeat-x;
	background-color: #F0DE00;
	height:75px;
	}

So change the above to:

Code:

#logoWrapper{
	background-image: url(../images/header_bg.jpg);
	background-repeat: repeat-x;
	background-color: #F0DE00;
	height:110px;
	}

That should set things right as rain, seeing how your banner is 110px tall. Also, remove instances of "tile_back.gif" throughout the stylesheet. You aren't using them and they will haunt you in your error reports as broken images, because browsers are trying to fetch what is not there.