How to fix xhtml and css validation errors in Virtuemart

There are essentially two issues causing the xhtml & css not to validate.

How to fix the css validation

The css validation error is due to the use of text-align:top in the “Featured Products” block on the shop landing page. The issue being that “top” is not a valid option for the text-align property. Valid options for text-align are:

• left


• center


• right


• justify


• inherit

The correct usage to set the vertical alignment is… yup, you guessed it “vertical-align“.

(Read more about the differences between css vertical-align property and css text-align property)

The file that needs to be updated in Virtuemart is located in:
[site-root] > components > com_virtuemart > themes > default > templates > common > featuredProducts.tpl.php

Line 15, change from this:

<div style="float:left;width:<?php echo $cellwidth ?>%;
text-align:top; padding:0px;" >

To this:

<div style="float:left;width:<?php echo $cellwidth ?>%;
vertical-align:top; padding:0;" >

How to fix the xhtml validation

The second problem causing the xhtml validation to fail was also in the Featured Products file. This time caused by the product title h4, a block level element, being wrapped by a link, which is an inline element.

This can be fixed in two ways:

The first is to reverse the nesting, so the link is inside of the heading.

Line 16, change from this:

<a title="<?php echo $featured["product_name"] ?>" href="<?php
$sess->purl(URL."index.php?option=com_virtuemart&amp;page=shop.
product_details&amp;flypage=".$featured["flypage"]."&amp;product_id=
".$featured["product_id"]) ?>">

To this:

<h4><a title="<?php echo $featured["product_name"] ?>"
href="<?php $sess->purl(URL."index.php?option=com_virtuemart&
amp;page=shop.product_details&amp;flypage=".$featured["flypage"]."
&amp;product_id=".$featured["product_id"]) ?>">

The second option is to change the product title from an h4 to an inline element, such as a span. I personally prefer the first method, as using a heading brings more structure to the page.

How to fix the final xhtml validation errors

The last few xhtml validation errors we caused by the use of ampersands (ie, &) in the stores categories, for example Laptops & Accessories. I tried using the full entity code (ie, &) but the error prevailed.

The quick and easy fix was to simply use the full word ‘and’ instead. This isn’t the most ideal fix, but it works. A better solution would be to add a simple string replace function to replace all instances of & with the full entity code, like Joomla! does with its menus.

Hope this comes in handy in your next Virtuemart project!



You c an find original post here : http://www.prothemer.com/blog/tips-and-tricks/virtuemart-xhtml-css-validation-errors/