I think this is a CSS problem?

If you go to my shop, the products run on through the footer on some computers (not mine at home, but my office one). See it at:

http://diginirvana.com/zen_cart/store

I think this is a CSS problem? Does anyone see anything suspicious in my CSS?

Thanks so much for your help!
Carina

What is the difference in the two computers? Different browser? I'm viewing in Firefox on a Mac and I don't see the problem so I don't know how to help :) .

Both are Macs. Mine is a powerbook. The ones at my office is brand new with Leopard on it. I don't think that's the problem though. One of my Creative Team members said they are having trouble scrolling down (which seems to be the issue). And fixes for something like that?

Okay, so I think a contributing factor is that I added this recently (now I have the scrolling problem for some computers). Here it is:

.centerColumn {
background-image: url(../images/nirvanagrandopeningsale1.jpg);
background-repeat: repeat-x;
height: 90px;
margin:0;
padding-top: 93px;
}

So I added 90px of height that for some reason does not get fixed for some browsers/computers. Also I just tried the shop out in Internet Explorer on my computer and noticed that the footer just comes out as a thin line (with no buttons/links). Otherwise it is fine in Firefox and Safari on my computer.

Any suggestions? Thanks so much!
Carina

I'm trying to figure out why you have repeat-x on your background repeat. I only see it once and I'm assuming that's all you want me to see, so you need to replace the repeat-x with no-repeat. Not sure that will help at all since I'm a trial and error learner and I can't do that with your site, but it can't hurt to try that. What I'm really wondering, though, is why you don't just add the image via the main page editor as you did with the text. This doesn't look like the stock Zen template so you very well may have a reason, but I'm just not familiar with that template so I have no idea why adding it along with the text wouldn't work.

If I use the main page editor won't it only show up on one page (the main page)? Not every page as it does now? plus, I'm not sure how to add an image.

I changed the repeat-x, but it didn't seem to solve the problem. Hmmm. Anything else?

Thanks so much for your help!

Aah, I didn't know you wanted it on every page. Guess I'd better bow out now and leave it to the experts if that didn't fix it. As I said, I'm a trial and error learner so without just playing around, I wouldn't have any other ideas. Maybe someone else here will. I can say that I feel your pain, I hate the differences between the way different browsers render the pages (not only in Zen, but in everything)!

Try this:

.centerColumn {
background-image: url(../images/nirvanagrandopeningsale1.jpg);
background-repeat: no-repeat;
height: 1%;
margin:0;
padding-top: 93px;
}

Thanks! I think that fixed everything but the product image (it doesn't move down). I have to check my school office on Monday to see if that computer works with this too. Any ideas on the product image?

Thanks SO much!
Carina

You need to increase the top margin for the category icon/description so that the page starts to display below the background image you have added.

Find this:

.categoryIcon {
}

Change to this:

.categoryIcon {
margin-top:90px;
}

This then gives you the issue of your description not lining up. From what I can see in firebug you have a 4em top padding setting for <h1>, if you change this to 1em it should align. You need to check that this doesn't cause a conflict elsewhere.

h1 {
margin: 0.2em;
padding-top: 1em;
margin-top: 1em;
}

You have a few errors on this site you need to look at concerning google analytics as well.

Oh my gosh! YOU ARE AWESOME! That fixed it. I did have to leave the padding-top though because if I changed that, the category text ran into the image. (So the first page you get to like NIRVANA GO SALE and all of the maintenance info runs into the top image. If you have any thoughts on that-I'd love to hear it if you have time. Either way, you've been such a big help to me! You are a life saver!

On the <h1> tag for the front page, you could always include a class:

then add the spacing to the class, you could then set h1 back to 1em in your css and everything should then line up.

There should be no need to add a class tag in the php. Just combine the h1 with another class/id to make it specific, like

#indexHome h1 {}

to apply only to the home page.

Hey that would work as well, the thing is though that would add a 4em padding to every occurence in the home page. I thought I would single out the one which caused the issue so if need be the <h1> tag could be used again.

The h1 tag is only supposed to be used once in a page... and even if it were to be used again, there should be existing tags or other CSS methods to distinguish between them.