CSS Button Overflow Problems

[rstevenson]

You can see some products where the "buy now" buttons overlap the picture.

I didn't realize that was a problem. It looks deliberate, and even looks good. ;-)

But how does this vertical overlap relate to the size problem? Size in buttons affects width, not height or vertical location.

Version of CSS buttons is the default that came with v138a.

Some years ago the CSS Buttons contribution was updated. The one included with ZC was based on an earlier version. It would be a good thing to get the latest version from the Free Software Add Ons (currently v2.6.4) and install it. It's not difficult. Do a careful compare between your existing stylesheet_css_buttons.css and the new one and copy over only the colour or size details as needed.

Doing this may or may not solve your problem, but it will eliminate other possible problems with the old code.

Rob

[rstevenson]

One thing I just noticed: in the link code for both the product thumbnail and the Buy Now button, you have zenid=[ some code here ]. That should not be in any links, in the sense that it's not at all necessary. I also wonder if it's a security problem, but I don't know enough about that to comment for sure. Any idea why it's there?

Rob

[Martot]

Rob,

Thanks for your help on this. On your advice, I've been through and upgraded to the latest CSS buttons on my local test server (not yet uploaded)- and this has not solved the problem, but is a big improvement in terms of admin and control, so I'll get this uploaded to the live site once i've ironed out the bugs (more overlap problems).

I've made a couple of changes to my template for the new products page to get rid of the validation errors, so that's all sorted (kind of).

The only solution I've found so far is to add the following to the CSS buttons stylesheet:

.button_buy_now {
display:inline-block; 
height:1.4em; 
line-height:1.4em;
}

Not sure why this works, but it seems to sort the problem. Perhaps the default diisplay style is set incorrectly in my main stylesheet?

The only alternative to the above statement is to add a white border around all my images. This works OK on some pages.

As for the zenID appearing in the button link, I can't seem to replicate this in my browser.

Anyway, I've uploaded the new CSS Buttons stylesheet - check out the "nicely" spaced buttons: http://www.sole-sisters.co.uk/index....e=products_new

[rstevenson]

Looking good. And no zenID now -- don't know why I saw it before. I simultaneously opened one of my sites to make sure there was no zenID in my links, and there wasn't, but I could certainly see it in yours at the time. Good that it's gone anyway.

Rob