CSS button sold out, overlapping ...more info

Hello,

I am having problems with the sold out button overlapping the ...more info link on the "all products page. This is happening on two different carts I am working on.

Changing the css for this button does not fix the problem. I did find that if I changed the html code created by this page from:

<br /><span class="cssButton button_sold_out_sm" onmouseover="this.className='cssButtonHover button_sold_out_sm button_sold_out_smHover'" onmouseout="this.className='cssButton button_sold_out_sm'" style="width: 80px;" > Sold Out </span><br />

to

<br /><p class="cssButton button_sold_out_sm" onmouseover="this.className='cssButtonHover button_sold_out_sm button_sold_out_smHover'" onmouseout="this.className='cssButton button_sold_out_sm'" style="width: 80px;" > Sold Out </p><br />

(the change being span class, to p class) that it fixes the problem of the spacing, but I don't know where I would change that in the ZenCart files?

Anyone know how to fix this?

And if you add this to the bottom of your css buttons stylesheet file

.button_sold_out_sm, .button_sold_out_smHover{
display: block;
}
```?

If you would change the span to p, the code for all buttons would be changed (if I remember well the Zen code for this resides in html_output.php), unless you add an option for it to the function of course. And I think there is no need to change the HTML code.

An url would help.

Hey Paul! Thanks, the display block fixed the problem!

:smile:

Glad it helped, and thanks for telling.