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

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/shop/images/headertest1.jpg%29;
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??

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

What's up??

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

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;
	[B]width: 920px;x99%;[/B] /*--------------------------------------------------------------------------------------*/
	xborder: 1px solid #ccc;
	
}

#headerWrapper { /*--------------------------------------------------------------------------------------------*/
margin: 0em;
padding: 0em;
[B]width:926px;[/B]
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; /*-----------------------------------------------------------------------------*/
}

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

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

And check spelling

Spike Kit Madras

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?

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
}

}

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!!

I must be going blind!!

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

Thanks Kobra , I have changed the c_1.css to your code.

What I was doing was erasing parts of the c_1 file, group by group, waiting to see when the background moved to it's correct position- I see now that was a waste of time because I would have ended up with those few lines and no change because another stylesheet is causing the problem.

Any ideas on what could be causing the right shift?

Oh and please could you tell me where the spelling mistake is, I still can't find it.

(I have turned the test site off to avoid confusion)

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

aha - thanks for the link, Thats the old test site which I have now turned off to avoid confusion.

My problems are at http://spicez.com.au/shop

Curry Kits has the c_1.css file and an identical pic but with a blue cross to confirm the c_1 is working.

Spices is the only other category, it also shifts to the right

Something is making the categories shift to the right, I am stumped.

btw just to be clear Home,About, Hint n Tips & Contact are Wordpress pages, only curry kits and Spices are Zen Cart pages

I really appreciate your help with this, thank you

When I look at it I notice that the main page displays a ladder bar in the far right so that one can scroll down

The others currently so not contain enough content to require the bar

I believe that this is wha/whyt you are seeing a shift

THANK YOU kobra!!!!!

I've added a test product and yes!!! it was the lack of scroll bar!!

I award you the status of genius :clap::clap: