Can someone help

[nuchie1]

How can I get my products to all line up? http://www.catholicgiftsinc.com/category.php?id_category=2 See how these don’t line up. I want all the items to look like they are in a table with the bottoms all in line

[phrasespot]

Open .../themes/prestashop/css/global.css find (line 1573)

ul#product_list li div.center_block {
   float: left;
   width: 74%
}

replace with:

ul#product_list li div.center_block {
   float: left;
   width: 74%;
   height: 75%;

}

[nuchie1]

I tried adding the height and didn't work. Here is my code.

/* product-list.tpl */


ul#product_list{ list-style-type:none; }
ul#product_list li {


float: left;
padding: 0px;
width:135px;
height:275px;
margin-bottom:1em;
}



* html ul#product_list li {
height: auto !important;
height: 130px
}
ul#product_list li a {
text-decoration: none;
color: #374853
}
ul#product_list a.product_img_link {
border: solid 1px #d0d3d8;
float: left;
margin-right: 0.6em
}
ul#product_list a.product_img_link img { vertical-align: bottom }
ul#product_list li h3 { margin: 0.4em 0 }
ul#product_list li .new {
background: transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
border: 1px solid #488C40;
color: white;
font-size: 0.6em;
font-weight: bold;
margin: 0 1em 0 0;
padding: 0 0.4em;
text-transform: uppercase;
vertical-align: 0.3em
}

ul#product_list li p.product_desc {
margin-bottom: 0;
font-size: 0.92em
}

ul#product_list li div.center_block {
float: left;
width: 74%;
height: 75%;
}
ul#product_list li div.right_block {
float: left;
width: 11em;
text-align: right;
margin-left: 1em;
margin-top: 0
}
ul#product_list li .discount {
color: #da0f00;
text-transform: uppercase;
font-weight: bold;
display: block
}
ul#product_list li .on_sale {
color: #da0f00;
text-transform: uppercase;
font-weight: bold;
display: block
}
ul#product_list li .reduction {
display: block;
margin-bottom: 0.3em
}
ul#product_list li .price {
display: block;
font-size: 1.5em;
margin-bottom: 0.2em
}
ul#product_list li span.availability {
color: #488c40;
font-size: 0.9em
}
ul#product_list li a.button { margin-top: 0.5em

[phrasespot]

The line number I gave you was from the css used yesterday and would have solved the problem you were having applied verbatim. You made some major changes since. Revert the changes you made since you posted your original post and we will start again. Do not try to solve any other problem you may be having in the interim. Deal with one thing at a time. You do not need to paste code here, I can see your CSS from the link you provided.

[nuchie1]

I think I put the original code back. I want the bottoms to all line up and stay that way regardless of amonut of text above.

Thanks for your help

[phrasespot]

No problem. Now find the line that reads

ul#product_list li div.center_block {

that should be line 1573 if you can see line numbers. Note that there are similar lines, it should be exact line as given. Then apply the change I suggested above.

[nuchie1]

Still no good. Any other sugestions? This is driving me crazy.

[phrasespot]

"Still no good" does not help. Spell out the exact problem you are having (one thing at a time). You said:

How can I get my products to all line up...

They are all aligned now. What is the next problem?

[nuchie1]

I want the bottom to line up. The buy and view buttons to all be in line.

Thanks

[phrasespot]

The problem with IE, in Firefox it displays just fine.... I'm trying to look at it now but the page keeps changing so I will leave it to you to do whatever you are doing. Post here if you want to stop messing with it while you ask help from someone else.

[nuchie1]

Sorry I will leave it alone. Didn't know you were still looking.
Forgive me.

[nuchie1]

Are we OK, are you still looking?

Thanks

[phrasespot]

OK. Here is what you need to do:

replace

ul#product_list li div.center_block {
   float: left;
   width: 74%
}

with

ul#product_list li div.center_block {
   float: left;
   width: 74%;
   height: 75%;
}

then space out items a little. Replace

ul#product_list li {
float: left;
padding: 0px;
width:135px;
height:275px;
margin-bottom:1em;
}

with

ul#product_list li {
float: left;
padding: 0px;
width:135px;
height:375px;
margin-bottom:1em;
}

Results are:

Internet Explorer
Firefox

You still have the pager problem but since this is a completely CSS related issue you are having, you may be able to get more sound advice at a CSS help forum.

[nuchie1]

Thanks again for your help.