How can align my products in the browse page to top in Virtuemart

Amanda Watson
Amanda Watson used Ask the Experts™
on
Hi,
On my shop here
http://65.108.67.175/index.php?option=com_virtuemart&page=shop.browse&category_id=8&Itemid=3

You will see that the products don't align properly to the top ....how can I fix this...the browse template isn't using tables so I don't know how to align it?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Panagiotis Sweb developer - designer

Commented:
what do you mean?

i can see categories OK but no products in categories

the only problem is the vm categories module which is horizontal
You're using table to create the layout, but in each cell you use layers (to get the rounded corners effect.
By default, the layers are vertically centered in the cell. In order to correct this, you can add to the cell (<td>) this style: style="vertical-align:top"
Take in consideration, that by default, layers have the dimensions of their content, and since each product has different content, so will be the size of its containing div.
You can set the desired height of the containing div, in order to prevent differences.
In addition, you have an error in your html:
 <div class="contentb" style="height:100%px;">

Open in new window

You can't use both % and px as units!
Panagiotis Sweb developer - designer

Commented:
or .contentb the height you want like

.contentb{height:65px}
Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

Amanda WatsonWeb Developer

Author

Commented:
That height is coming from the site configuration - there is a field to enter in the height of each product box.
But this doesn't work to enter a fixed height becasue each product box is a different height.  To get around this I entered 100% so it doesn't use any height and each product is shown in full varying height.

When I look at the browse pages there are no tables but divs and I tried adding style="vertical-align:top" to a div like this below but it did nothing to the layout
<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );
mm_showMyFileName(__FILE__);
/*------------------------------------------------------------------------
# VMJ Naru Theme for VirtueMart 1.1.5 - September, 2010. Ver. 1.0
# ------------------------------------------------------------------------
# Copyright (C) 2009-2013 Virtue Planet Solutions. All Rights Reserved.
# Llicense - Copyrighted Commercial Software
# Author: Virtue Planet Solutions
# Email: webmaster@vmjunction.com
# Websites:  http://www.vmjunction.com
# Icon Designed by: http://www.dryicons.com
-------------------------------------------------------------------------*/
?>  
<div style="vertical-align:top";><b class="b1"></b><b class="b2e"></b><b class="b2d"></b><b class="b2c"></b><b class="b2b"></b><b class="b2a"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
    <div class="contentb" style="height:<?php echo $this->get_cfg('BrowsePageBoxHeight') ?>px;">
        <div>
			<div class="bp_product_name_container">
				<h3 class="bp_product_name">		
					<a title="<?php echo $product_name ?>" href="<?php echo $product_flypage ?>"> <?php echo $product_name ?></a>
        		</h3>
			</div>
			<div class="bp_product_img">
    			<a href="<?php echo $product_flypage ?>"><?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?></a>
   			</div>
			<div class="bp_product_desc">
				<?php echo $product_s_desc ?><a href="<?php echo $product_flypage ?>">&nbsp;...</a><br/>
				<?php  if( $this->get_cfg('showSKU') ) { ?>
					<div class="bp_ProductSKU">
						<?php echo $VM_LANG->_('PHPSHOP_CART_SKU') ?>:&nbsp;<?php echo $product_sku ?>
					</div>
				<?php } ?>
				<?php if( ($product_in_stock >= 1 && CHECK_STOCK) ) { ?>
					<div class="bp_ProductStock"><?php echo $VM_LANG->_('PHPSHOP_PRODUCT_FORM_IN_STOCK') ?>:&nbsp;<?php echo $product_in_stock ?></div>
				<?php } 	
				elseif (($product_in_stock < 1 && CHECK_STOCK) || $product_available_date > time() ) { ?>
					<div class="bp_ProductStock"><?php echo $VM_LANG->_('PHPSHOP_CURRENTLY_NOT_AVAILABLE') ?></div>
				<?php } ?>
			</div>
			<?php if( !empty( $product_price )) { ?>
				<div class="bp_product_price">
					<span class="product_price_title">
						<?php echo $VM_LANG->_('PHPSHOP_ORDER_PRINT_PRICE') ?>:&nbsp;
					</span>
					<?php echo $product_price ?>
				</div>
			<?php } ?>
			<?php if( !empty( $form_addtocart )) { ?>
				<table cellpadding="0" cellspacing="0" align="center">
					<tbody>
						<tr valign="top">
							<td align="right">
								<?php echo $form_addtocart ?>
							</td>
							<td align="left">
								<div class="bp_product_details">
									<a href="<?php echo $product_flypage ?>" title="<?php echo $VM_LANG->_('BP_PRODUCT_DETAILS') ?>">
										<?php echo $VM_LANG->_('BP_PRODUCT_DETAILS') ?>
									</a>
								</div>
							</td>
						</tr>			
					</tbody>
				</table>
			<?php } 
			else { ?>
				<div class="bp_only_product_details">
					<a href="<?php echo $product_flypage ?>" title="<?php echo $VM_LANG->_('BP_PRODUCT_DETAILS') ?>">
						<?php echo $VM_LANG->_('BP_PRODUCT_DETAILS') ?>
					</a>
				</div>
			<?php } ?>
		</div>
	</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b2a"></b><b class="b2b"></b><b class="b2c"></b><b class="b2d"></b><b class="b2e"></b><b class="b1"></b>
</div>

Open in new window

This is taken from the page source:
<table cellpadding="0" cellspacing="0" align="center">
					<tbody>
						<tr valign="top">
							<td align="right">
								<?php echo $form_addtocart ?>
							</td>
							<td align="left">

Open in new window


So the table is there, BEFORE the partial code that you submitted!  and again you need to change
the following:
<td colspan="1" align="center" width="50%">      
into: <td colspan="1" align="center" width="50%" style="vertical-align:top" >      
Panagiotis Sweb developer - designer

Commented:
if i were you i would have put height to all the classes (use min-height too)
.bp_product_name
.bp_product_img
.bp_product_desc
.bp_only_product_details
Amanda WatsonWeb Developer

Author

Commented:
Hi Hagay, I have no idea where that code is coming from?
There are a few template files but none like that source code.

I think it will be coming from the configuration somewhere as the page is construted based on how many products you want to show per row (ie the 50% for 2 products)

So where on earth is that page??
Try setting product box height.
Now the code is:
<div class="contentb" style="height:<?php echo $this->get_cfg('BrowsePageBoxHeight') ?>px;">

Open in new window

The $this->get_cfg('BrowsePageBoxHeight') generates a relative height (relative to its content).
AND it generates an error [the units are: %px]
See whether this replacement does the job:
<div class="contentb" style="height:200px;">

Open in new window

Amanda WatsonWeb Developer

Author

Commented:
Hi, I know there is an error with the %px but as I said above I do not want a UNIFORM value of 200px or anything in there so I have set it as an error so each box is a varying size.

I did you change and each box becomes 200px but then the content overlaps the below product if it is too long.  I can set that value in the backend configuration too but I don't want it to be uniform at all.

SO I removed the height alltogether now so the error of %px is gone an each box is varying in height now I just have to make each box align to the top of the page rather than center!
Amanda WatsonWeb Developer

Author

Commented:
I tried changing it to <div class="contentb" style="vertical-align:top;">  but it doesn't work
<div class="contentb" style="height:200px;">
Panagiotis Sweb developer - designer

Commented:
you can also try the min-height value !

Amanda WatsonWeb Developer

Author

Commented:
How would I use the min height value.

Hagay Mandel, when I do your suggestion it WORKS and everything is aligned to the top HOWEVER I am trying to explain that when I set a height for the product boxes IT DOESN"T WORK because each product box is a different height.  I cannot set the height value
Any how it's gonna be a compromise!!
Since each product has different text length, and different image size, and divs stretch as high as their content, there's no way you can have everything nicely arranged.
So the solution is to go by the highest box, and set the height to its value.
Sure in many products you'll have spaces, and the inside content will not be parallel, but the boxes themselves, will be well arranged.
I used 200px in my example, maybe you can use a smaller value.
Panagiotis Sweb developer - designer
Commented:
snowball77

"
if i were you i would have put height to all the classes (use min-height too)
.bp_product_name
.bp_product_img
.bp_product_desc
.bp_only_product_details
"
Amanda WatsonWeb Developer

Author

Commented:
thank you

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial