You said: Quote:I still can't

webwiz — Mon, 20 Sep 2010 20:56:03 +0000

You said:

Quote:

I still can't figure out how to get the catalog pages to work as the CSS is fairly complex.

Personally, I'd complain that it's the HTML that is way, way too complex. It's my belief that using POSH markup--Plain Old Semantic HTML--is the only way to go. A few DIVs and SPANs *may* be needed as hooks for CSS, but, as I tried to demonstrate, even these may not be necessary.

What I tried to give you was some minimal styling of a simple list of products, using the bare necessities of CSS to get it to work cross-browser. The CSS properties (no attributes in CSS!) are applied to the elements that are selected by the--err--selectors.

FWIW - Sitepoint has some "Live" courses I can recommend. Perhaps the one on CSS will help you:
http://courses.sitepoint.com/css-live

The "live" course already took place, but the material is still good. I have not taken this particular course, but took 3 others, all of which were terrific value. (But a lot of work--they are quite comprehensive.)

Cordially,
David
--

David, I can't thank you

redrobin12 — Mon, 20 Sep 2010 18:15:07 +0000

David, I can't thank you enough for your help! I managed to get the detailed pages fixed but I still can't figure out how to get the catalog pages to work as the CSS is fairly complex. I am not sure exactly where to apply each of the css attributes that you created in your example. Any further direction you can give would be much appreciated. Please let me know if there is anything I can do for you. Regards, Lisa

Your spacer image is set in

webwiz — Mon, 20 Sep 2010 05:41:42 +0000

Your spacer image is set in the HTML and in the CSS to the size of the large image, to make room. The large images, which are absolutely positioned, take up no room themselves.

Because of the "overflow: hidden;" on the container, the large image is cut off, as you can see. The "!important" on the spacer width and height trumps both the CSS and HTML width and height, so the spacer only takes up 10px by 10px instead of the size you want. Take off the "!important" from the width and height, and you may get to see the large image. Of course, that may affect something else, perhaps on another page... :\

I made an attempt with the gallery here, trying to avoid any JavaScript:

http://webwiz.robinshosting.com/temp/shop/

CSS and comments included on the page. It's not perfect, but close, I think. It survives substantial increased text size quite well. Also will reduce to four "columns" on a narrow window... Except in IE 6, of course.

Tested in Safari, Firefox, IE 6,7, and 8.

Cordially,
David
--

Hi David- Thanks so, so much

redrobin12 — Sun, 19 Sep 2010 18:45:34 +0000

Hi David- Thanks so, so much for your response. I really need to learn more about CSS. Any recommendations? Also, I understand a bit the theory behind what you are saying, but I'm still not totally sure how to fix it... How do I make the thumbnails all the same size, as you suggest? Will it distort them? What do you mean 'use a script to get the height of each box and applying the height of the tallest to every one?' I don't know how to do that.

What would the CSS look like to make each add to cart button position to the bottom? I'm good at tweaking CSS, but not writing it.... I didn't realize when I bought this plugin I would need to know CSS... Not your fault of course but now I'm stuck trying to fix this! LOL

I'm also not totally sure what I'm supposed to change to fix the spacer image problem? I don't see 10px x 10px anywhere so I can't figure out where to tweak that.

Again, thank you so much for your kindness.
Sincerely,
Lisa

If all the thumbnails were

webwiz — Sun, 19 Sep 2010 06:10:31 +0000

If all the thumbnails were the same size (96 x 96) the descriptions at least would line up. Getting the buttons to line up with just CSS is not possible, considering how you have no control over text size, and therefore how many lines of text each description takes. I would use a script for this, getting the height of each box and applying the height of the tallest to every one.

To get the "Add to Cart" button to sit at the bottom of each box, I'd put "position: relative;" on each box, and absolutely position each button to the bottom of its box (left: 0; bottom: 5px; ?). You'd need to add enough padding to the box bottom to make room for it.

The reason your larger image is not appearing is because the "spacer image" you use in the li#preview-fill is set to its actual size--10 x 10 px--on account of this rule in style.css, line 363 -

.hentry img {
...
height: auto !important;
width: auto !important;
}

Result - the ul.previews is only one text line high--not the 240px you intend.

Cordially,
David
--