CSS Button Overflow Problems

[Martot]

Right, I've had a problem with CSS buttons which I've ignored for a good few years now, and feel that now is the time to square this one away.

The problem is that any CSS button that sits within a hyperlink container, i.e. <a>[BUTTON CODE]</a> overflows the link container.

I've always worked around this by padding out the surrounding divs accordingly to avoid nasty overlap. An example of what I mean is posted in the image attached (blue box smaller than button which overlaps image).

Now this must be a really simple problem to solve right - I just declare the "a" entry in my style sheet to be the same height or bigger than the CSS buttons, but only for buttons, so I've tried
A SPAN.cssbutton {height:XXpx;}

...but this doesn't work.. I've tried playing around with overflow statements, block vs inline display, etc etc, but nothing works. Always the link container wants to be smaller than the button inside it.

I haven't posted any css code yet, as my guess is that the solution is blindingly obvious to anyone who knows more than me about css, but I can if anyone needs it.

[Martot]

Bit more digging on this: The problem seems to be that I've declared the global font size to be 70% using:

body {
line-height:1.5em;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:70%;}

But I've set the CSS buttons to be a specific pixel font size, so they all look the same:

.cssButton, .cssButtonHover {
font-size: 10px;
etc.}

The conflict then arises whenever there's a CSS button as follows:

 
<a href=http://mydomain/index.php?main_page=...roducts_id=149>
<span class="cssButton button_buy_now" style="width: 80px;" onmouseout="this.className='cssButton button_buy_now'" onmouseover="this.className='cssButtonHover button_buy_now button_buy_nowHover'"> Buy Now </span>
</a>

The container <a> is at 70% font-size, whereas the button is at 10px. So how do I declare the <a> container to be font size 100% (or whatever) .

If I put out an A declaration in the css file, then this applies to all links (not just ones containing buttons). A SPAN.cssbutton applies to just the .cssbutton class. Any thoughts?

[rstevenson]

I really can't tell what you're talking about here. I don't see the problem in your attached image and the description of the problem isn't adding up. A link to your site would simplify the search. (I use CSS Buttons on both my sites and don't have that problem. I also don't have the button font size set to anything in particular.)

By the way, which version of CSS Buttons are you using?

Rob

[Martot]

Thanks for your reply,

An example can be found at the following page:
http://www.sole-sisters.co.uk/index....e=products_new

You can see some products where the "buy now" buttons overlap the picture. In Firebug you can then see that the problem is the <a> container being smaller than the <span> declaration which houses the css button.

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

[Website Rob]

I would say to first fix the problems you have from not closing a lot of <td> tags.

Did you run your page(s) through a Validator?

[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