How to fix xhtml and css validation errors in Virtuemart
In case you don’t already know, Virtuemart is an online shopping cart extension for Joomla! and is often listed as one of the most popular Joomla! extensions available.
Last week I received a private message on our forum from one of our members saying that his Virtuemart store was failing css validation and asked whether i would take a look to see if the issue was related to the template, or his Virtuemart setup.
After taking a look at the validation error and the xhtml output, it was easy to spot what was causing the problem.
My first step was to setup a fresh install of Virtuemart and see if the problem existed before any changes were made. The result was that my local install failed validation on both xhtml and css.
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&page=shop.product_details&flypage=".$featured["flypage"]."&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&page=shop.product_details&flypage=".$featured["flypage"]."&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!
Tags: css, ecommerce, joomla 1.5, validation, virtuemart
We are in love with everything web and embrace technology as a means to drive social change.
Chris,
Great fix. Thanks for all the help.
Later,
TOM
A pleasure as always Tom :) Glad i was able to help get your sites validation back in the green :P
If this is still valid, it would be a great idea to send to the Virtuemart developers so they can include in their next release.
cheers
Hi Peetree,
I tested this on the latest available release, so unless there has been a new release since this post, then i’d say its still valid. I’m planning on submitting a bunch of feedback once i start on our Virtuemart overrides for Morph, but feel free to let them know about this one in the mean time :)
Cheers,
Chris
.-= Chris´s last blog ..How to fix xhtml and css validation errors in Virtuemart =-.
Hello,
i have added the fix to the virtuemart-svn. If it passes the tests, it will be included in virtuemart 1.1.4
Thomas
Awesome, thanks Thomas :)
We’ll be jumping in Virtuemart more once Morph is stable and will report anything else we find, including possible code changes, etc :)
Cheers,
Chris
.-= Chris´s last blog ..5 free online marketing resources =-.
Hi Chris,
thank you so much for your solution.
One question: must there not be a closed tag in line 16 for the h4 tag because my editor (macromedia) shows the single open tag in yellow
Kind regards
Franco
No probs Franco ;)
If you take a look at the full block of code, you will see that the h4 is indeed closed.
I’ve uploaded my version to box.net, so you can download a copy and take a look.
http://www.box.net/shared/vlmj289jaa
Dreamweaver sometimes shows elements as being unclosed even though they are. I think it has to do with the mixed up html and template tags that it doesn’t understand.
Hope that helps!!
Cheers,
Chris
Hi Chris,
thank you, that’s the reason…
Best regards
Franco