Main Page Content

[wendyladyk]

Hi, I cannot for the life of me figure out how to fix this problem. Firstly, I am using the Future Zen template. I installed the tpl_header to move the login and home below the logo instead of the top. Below that is a cell I made the background black and it lists the categories. Well, it all looks fine there, but if go to other sections of the site, the cell varies in size. How can I get the cell uniform throughout the site? Thanks, Wendy

[kuroi]

Do you have a link to your site where we can see this problem in action?

[wendyladyk]

Yes, the url is at http://www.naturecreationsbyginny.com/shop/

This is my second practice site. I gave up the first time since this seems like a very complicated cart to set up. I read and read and never seem to get very far. I really want to learn the cart system since I like what it can do.

I would appreciate any help I can get.

Thanks, Wendy

[kuroi]

Firstly, I really like your header. That's a wonderful graphic. There's also some nice use of textured backgrounds on your site.

Looking under the hood, I was initially stunned to see that this was based on the future Zen template. future Zen is intended as an easy way to move away from the tables-based Classic template and harness the power of the near-tableless template_default. You have then done what I love to see most, namely amended it beyond recognition to make something that is unique and your own.

I'm less sure about the reintroduction of those tables, and indeed that's what's caused your problem. Let's pick it apart and provide you with a very easy solution ...

Firstly, the errant behaviour does not maifest itself in all browsers. It's there in Internet Explorer, but everything looks fine in Firefox. Secondly, although the black cell expands and contracts from page to page, it's not the only symptom. Your logo and the search bar also move about and are centered above the black cell, whatever width that might be.

Using the Internet Explorer Development Toolbar to outline the tables on your page shows that the width of the table that you have wrapped around almost everything varies from page to page. This is actually your problem. While by default Firefox expands it to take up as much space as possible, Internet Explorer's default is to expand it only as far as its content demands - hence the variation that you're experiencing.

To resolve this you need to force the width of this table either by giving it a number of pixels or better, since it is constrained by the mainWrapper, by adding the following to your stylesheet

.centershop {width:100%}

One small further comment, you have given this table, and I suspect others, a class that is used uniquely for that table. Better practice would be for these to be IDs in which case the CSS needed would be

#centershop {width:100%}

[wendyladyk]

Hi Kuroi,

First of all, thank you for the nice comment on my graphics! I made the logo using one of my mothers pieces of art. She paints scenes on the fugus that grows on elm trees.

Your suggestion worked great! Thank you very much for your help. I am sure I will be asking alot more questions in the near future. It is hard to figure out where in the css file to change things. So ya just change whatever and see what happens, then change it back if it's not right :) It's kinda of a guessing game right now.

Wendy

[kuroi]

First of all, thank you for the nice comment on my graphics! I made the logo using one of my mothers pieces of art. She paints scenes on the fugus that grows on elm trees.

It wasn't just the picture, I liked the typography too.

It is hard to figure out where in the css file to change things. So ya just change whatever and see what happens, then change it back if it's not right :) It's kinda of a guessing game right now.

That's normal. As you get more experience with CSS and learn more of the theory behind it, and more of the detail of how it's used in Zen Cart, it gets easier and easier to just go straight to the right place. In the meantime, change it AND change it back is spot on. A big mistake people make early on is to change and if that doesn't work change something else, and so on, often producing heavy and impenatrable CSS as they go. It's good to know you won't be making that mistake.