header moves to the right when viewing category- BUT...

[Stingraynut]

I'm using the Barebones template and current ZC version.

I have a background as a header, all in css


My background moves to the right about 16 pixels when going from

mydomain/shop
to
mydomain/shop/index.php?main_page=index&cPath=1/

( which is one of the categories.)

BUT

If I open firebug it goes back to the correct position!!!

While firebug is active the header doesn't move


The header doesn't move in IE, does move in Chrome & Opera.


The CSS to insert and position the background is here

#headerWrapper {
margin: 0em;
padding: 0em;
width:926px;
height: 366px;/*adjust to suit*/
background-image: url(http://test1.tinarooadventures.com/s...dertest1.jpg);
background-repeat: no-repeat;
}

Does anyone know why the shop background is in one place and the categories background moves to the right several pixels??

and why would firebug move it back??

[kobra]

Your image is 900px wide
You have the main wrapper set to 920px
You have the header wrapper set to 926px

What's up??

[Stingraynut]

Thanks for the quick reply kobra - I felt stupid but happy that the answer was so simple.

I checked the barebones stylesheet expecting to have to alter the widths but they were both 900px!!

I have checked stylesheets in the barebones template and classic and template-default (because I don't know which ones might be causing this)

I assumed that the Barebones style sheet overirde all others?

in that stylesheet I have
/*wrappers - page or section containers*/
#mainWrapper {
background-color: #ffffff;
text-align:left;
width: 900px;x99%;

#headerWrapper {
margin: 0em;
padding: 0em;
width:900px;
height: 366px;/*adjust to suit*/
background-image: url(http://s p i c e z.com.au/shop/includes/templates/barebones/images/spicemixheader.jpg);
background-repeat: no-repeat;
}

I have put spaces between the letters of spicez, to avoid it being used as a link by search engines.

In firebug when I highlight the background picture I see

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin:0;
padding:0;
}
stylesheet.css (line 176)
#headerWrapper {
background-image:url(http://s p i c e z.com.au/shop/includes/templates/barebones/images/spicemixheader.jpg);
background-repeat:no-repeat;
height:366px;
margin:0;
padding:0;
width:900px;
}
stylesheet.css (line 166)
Inherited fromdiv#mainWrapper
#mainWrapper {
text-align:left;
}
stylesheet.css (line 158)
Inherited frombody#indexBody
body {
color:#111111;
font-family:arial,helvetica,sans-serif;
font-size:80%;
line-height:160%;
}

Is there another stylesheet that could override the barebones template stylesheet?

I am thinking there is some padding or margin coming into play here.

When I go to the shop the background displays correctly.
When I click on a category perhaps the category goes inside the shop wrapper and there's a margin/padding added?

hope you can help me find this problem

[kobra]

I checked the barebones stylesheet expecting to have to alter the widths but they were both 900px!!

Do not know what you are checking but this is what your site is using

/*wrappers - page or section containers*/
#mainWrapper {
	background-color: #ffffff;
	text-align:left;
	width: 920px;x99%; /*--------------------------------------------------------------------------------------*/
	xborder: 1px solid #ccc;
	
}

#headerWrapper { /*--------------------------------------------------------------------------------------------*/
margin: 0em;
padding: 0em;
width:926px;
height: 366px;/*adjust to suit*/ 
background-image: url(http://test1.tinarooadventures.com/shop/images/spicemixheader.jpg);
background-repeat: no-repeat;x
xborder:1px solid red; /*-----------------------------------------------------------------------------*/
}

[Stingraynut]

Hi kobra, sorry for the misunderstanding, that URL is a test site to get started with my first zen cart. I'm not using it anymore.

I am working at the real site which is

http://spicez.com.au/shop

I have a wordpress site displaying for all pages except the two categories- curry kits and spices which are from Zencart

if you go to /shop the background is the same as the wordpress pages

if you click either category the background image moves to the right

(unless you activate firebug!!)

UPDATE I am working on a stylesheet with a different picture so curry kits may look strange as I sort it out- I will leave spices for the moment- I'd really like to understand what is happening

[kobra]

Try deleting the c_1.css file Or at least remove it from the server

And check spelling

Spike Kit Madras

[Stingraynut]

I've just discovered how to have a different background image for each category, am now working on centering it.

I will leave Spices alone so that you can still see the right shift on that page- is that OK?

[kobra]

All you need in that file c_1.css is this or only the changes

#headerWrapper {
background-image: url(http://spicez.com.au/shop/includes/templates/barebones/images/XXXspicemixheader.jpg);
background-repeat: no-repeat;x
}

}

[Stingraynut]

And check spelling
Quote:
Spike Kit Madr

I must be going blind!! I can't find that mispelling on either the test site or the real site!!

[kobra]

I must be going blind!!

http: //test1.tinarooadventures.com/shop/index.php?main_page=product_info&cPath=1&products_id=1