Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Header image partially hidden behind page content

Header image partially hidden behind page content

Locked

Views: 1,671

Results 1 to 5 of 5
This thread is locked. New replies are disabled.
13 Apr 2007, 4:12 PM
#1
brennon avatar

brennon

New Zenner

Join Date:
Aug 2005
Posts:
12
Plugin Contributions:
0

Header image partially hidden behind page content

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 https://www.snotspotgear.com/spotstore

16 May 2007, 4:53 PM
#2
brennon avatar

brennon

New Zenner

Join Date:
Aug 2005
Posts:
12
Plugin Contributions:
0

Re: Header image partially hidden behind page content

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?

16 May 2007, 6:00 PM
#3
sketchy avatar

sketchy

Totally Zenned

Join Date:
Aug 2006
Location:
Canada
Posts:
940
Plugin Contributions:
2

Re: Header image partially hidden behind page content

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:

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

So change the above to:

#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.

16 May 2007, 7:19 PM
#4
brennon avatar

brennon

New Zenner

Join Date:
Aug 2005
Posts:
12
Plugin Contributions:
0

Re: Header image partially hidden behind page content

Thanks, Sketchy! That did the trick!!

16 May 2007, 7:21 PM
#5
sketchy avatar

sketchy

Totally Zenned

Join Date:
Aug 2006
Location:
Canada
Posts:
940
Plugin Contributions:
2

Re: Header image partially hidden behind page content

That's great to hear and you're very welcome. :D