Forums / Templates, Stylesheets, Page Layout / how to align buttons on the product listing page on the same horizontal line?

how to align buttons on the product listing page on the same horizontal line?

Started by evaky on 13 Oct 2011, 11:16 AM · Views: 1,448

Results 1 to 6 of 6
13 Oct 2011, 11:16 AM
#1
evaky avatar

evaky

New Zenner

Join Date:
Oct 2011
Posts:
12
Plugin Contributions:
0

how to align buttons on the product listing page on the same horizontal line?

Hi,

I want to align the buttons "details", "buy now" and "free shipping" to the bottom of the each product listing on the same horizontal level in all product list. Now, it looks a bit messy as some buttons are higher/lower than the others.

Please help! Can I add some div to some php files?

http://er2.com.au/index.php?main_page=index&cPath=1

Eva

13 Oct 2011, 3:18 PM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,874
Plugin Contributions:
8

Re: how to align buttons on the product listing page on the same horizontal line?

Find in your stylesheet.css.centerBoxContentsProducts { border: 1px solid #cccccc; padding: 1em 0em; margin: 4px; height: 230px; }edit to this```
.centerBoxContentsProducts {
border: 1px solid #cccccc;
padding: 1em 0em;
margin: 4px;
height: 235px;
position: relative;
}

.itemCartAdd {
position: absolute;
top: 182px;
width: 100%;
}

.itemCartAdd+img {
position: absolute;
top: 227px;
left: 27.5%;
}

14 Oct 2011, 8:39 AM
#3
evaky avatar

evaky

New Zenner

Join Date:
Oct 2011
Posts:
12
Plugin Contributions:
0

Re: how to align buttons on the product listing page on the same horizontal line?

Thank you so much! It works!!!!!:clap:

17 Oct 2011, 8:20 AM
#4
evaky avatar

evaky

New Zenner

Join Date:
Oct 2011
Posts:
12
Plugin Contributions:
0

Re: how to align buttons on the product listing page on the same horizontal line?

Hi,

After I add the coding. It works perfectly in Firefox and IE8. However, if the page load in IE7 or below version, the button moves!! Please help, how can I fix it to be presented correctly in all browser.

Attachment #9757

17 Oct 2011, 4:14 PM
#5
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,874
Plugin Contributions:
8

Re: how to align buttons on the product listing page on the same horizontal line?

Older IE did not support the adjacent selector (.itemCartAdd+img), so would ignore that whole rule. I don't think there is a viable workaround for that short of rewriting code to add another class tag.
IE bugs for older versions are well documented and not related to Zen Cart, so your best bet is to google for them.

17 Oct 2011, 9:49 PM
#6
rescoccc avatar

rescoccc

Totally Zenned

Join Date:
May 2010
Location:
WA State
Posts:
1,700
Plugin Contributions:
2

Re: how to align buttons on the product listing page on the same horizontal line?

Are there many people still using IE7?

The best way to learn is to try stuff. But, back it up first.