Space above and below header_bg.jpg

Hi,
I have changed or edited something wrong in my zen, and now there is a space between the top and bottom of my header_bg.jpg. It makes it look like it doesnt flor fleuntly with my cart. Could someone please check out my home page and tell me what i have done wrong? https://www.trstheatre.com.au

/includes/templates/trscustom/images/header_bg.jpg ...

You're still using zen's default header_bg.jpg.

Create your own header_bg.jpg (760 X110 px) to your specs, then OVERWRITE the zen default via a ftp upload to the appropriate directory.

Incorrect spacing is a CSS issue. The new version of MSIE is HOPELESS at interpreting some CSS instructions.

I found that tinkering around with some of the CSS spacing instructions (em , px , %) - ie: changing the "em" value to a "px" value in some cases, helped sort out spacing problems in MSIE.

Also, if you enable the ezpages header at any stage, you'll definitely need to tweak these spacing instructions in the CSS.

Hi, thanks for your help. i tried what you said, it is better in ie than firefox........it looks somehow like the main page is coming over the top of the header. Only half the header jpg is appearing....i.e. the bottom half is cut off. The space above is not there in ie but is still there in firefox.......any other suggestions? I dont know anything about css.

CSS is not difficult to learn... there are lots of online tutorials.

If you want your site to display properly and look really professional, you will need to know more than just a little bit about:-

php
mysql
html
css

it may not be difficult to learn, but to learn it to the point where you would know how to troubleshoot something like this may take quite a while...

Use Firefox and install Chris Pederick's developer toolkit (as should every zencart manager).

Then you can play with the CSS at will and see what your efforts look like in realtime.

This helped me learn CSS in rapid-time, as I could see what the result of an edit did, long before I committed changes to the actual pages / files.

In your tpl_header.php, right above this: <!--eof-branding display-->, change the

to

Then to even remove more space, open up your stylesheet and find the
.clearBoth section, and REPLACE it with this:

.clearBoth {
clear:both;
height:0;
font-size: 1px;
line-height: 0;
}

Hi, thanks once again for all you help.......it made my main page look much tighter but my header still doesnt work properly........it is cutting off the bottom 1/3 of my header.

cfardon:

Hi, thanks once again for all you help.......it made my main page look much tighter but my header still doesnt work properly........it is cutting off the bottom 1/3 of my header.

Because you have 75px for the height of that div, when the image is 110px tall.

change:

#logoWrapper{
background-image: url(http://trstheatre.com.au/includes/templates/trscustom/images/header_bg.jpg%29;
background-repeat: repeat-x;
background-color: #ffffff;
height:75px;
}

to
#logoWrapper{
background-image: url(http://trstheatre.com.au/includes/templates/trscustom/images/header_bg.jpg%29;
background-repeat: repeat-x;
background-color: #ffffff;
height:110px;
}

Thanks......that worked....i am greatly appreciate your help.