Sorting out HTML Validation

[zcnb]

I know that I should be hung from my toe nails and beaten with an organic carrot for not using an HTML validator from the 1st of using Zen-Cart.

But this is now water under the bridge and now that I started using the W3C HTML validator I am struggling with some error (?) messages. For example, in my template's english.php I defined:

define('BOX_INFORMATION_SHIPPING', 'Shipping & Returns'); 

Yet, the validator claims that this string, despite me using the proper escape code for the ampersand symbol, is erroneous:

# Warning Line 170, Column 134: character "&" is the first character of a delimiter but occurred as data

…6309fd86830a70c4f9638462b">Shipping & Returns</a>

This message may appear in several cases:

* You tried to include the "<" character in your page: you should escape it as "&lt;"
* You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
* Another possibility is that you forgot to close quotes in a previous tag.

What is going on here? Is this really a problem? If not, how do I turn it off so that I can tell the forest from the trees? I am currently troubleshooting a problem in my page and with scores of "false positives" like this it is almost impossible for me to find the source of the problem.

Thanks!

[mprough]

Post the link, the ampersand may be only a result of the issue... The validator can be tricky.

~Melanie

[zcnb]

Post the link, the ampersand may be only a result of the issue... The validator can be tricky.

Thank you, Melanie.

Here is the link to the simplified test site, which exhibits the same problem as the main site (The 'Go' link for the site search function simply doesn't respond to mouse clicks).

In the test site, I disabled all sideboxes and center boxes in order to reduce the amount of HTML code I have to go through when making sure that every <div> is properly closed, etc.

Your help is very much appreciated.

Thanks,
Daniel

[Website Rob]

Both sites use this code:

<li id="categories_tabs_main">
<div id="Downloadables">
<a href="index.php?main_page=index&cPath=2"><img src="includes/templates/candy/images/downloadables.gif"

Presuming you manually inserted the link, change the & to the ASCII value for all 3 links.


The main site has more Validation errors as you have incorrect HMTL in some places and mis-matched DIV tags in others.

[mprough]

This one has 8

http://validator.w3.org/check?uri=ht...Inline&group=0

The first is the unescaped ampersand in the link
<a href="index.php?main_page=index&cPath=2">
The second is caused by the first

seeing the trend here?

the shipping & returns link is the one in the footer... probably and EZ page text. Open the EZ page and add the &amp; then save. Note that next time you will need to re-add it as ZC will forget it.

~Melanie

[zcnb]

Thank you, Rob.

Presuming you manually inserted the link, change the & to the ASCII value for all 3 links.

You are correct in that the link was inserted manually but in the test site, I actually replaced the & with &amp; and the validator still issues the same warning.

Is it possible that I need to wrap the &amp; with another layer, such as htmlspecialchars() as described in this thread?

The main site has more Validation errors as you have incorrect HTML in some places and mis-matched DIV tags in others.

Is there a tool that can quickly display mismatched DIV tags? Finding those visually is daunting...

Thanks!

[Website Rob]

http://validator.w3.org/ << will show you your errors

You have some ambiguity here:

</div>
-->
<ul id="categories_tabs">

With a closing Comment tag but no opening tag, your links with the ampersand are not the ones showing on your page.

[mprough]

I see you found the shipping & returns link ... cheers!

The remaining errors appear to be ampersands.... in here

<!--bof-optional categories tabs navigation display-->
<!--<div id="navCatTabsWrapper">
<div id="navCatTabs">
<ul>
  <li><a class="category-top" href="http://www.softwarecandy.com/shilo4/index.php?main_page=index&amp;cPath=2">Downloadables</a> </li>
  <li><a class="category-top" href="http://www.softwarecandy.com/shilo4/index.php?main_page=index&amp;cPath=4">Gift Certificates</a> </li>
  <li><a class="category-top" href="http://www.softwarecandy.com/shilo4/index.php?main_page=index&amp;cPath=3">Subscription</a> </li>
</ul>
</div>
</div>
-->
  <ul id="categories_tabs">
    <li id="categories_tabs_main">
      <div id="Downloadables">
        <a href="index.php?main_page=index&cPath=2"><img src="includes/templates/candy/images/downloadables.gif" alt="Downloadables" title=" Downloadables " width="105" height="23" /></a>      </div>

      <div class="separator1"></div>
      <div id="GiftCertificates">
        <a href="index.php?main_page=index&cPath=4"><img src="includes/templates/candy/images/gift-certificates.gif" alt="Gift Certificates" title=" Gift Certificates " width="108" height="23" /></a>      </div>
      <div class="separator1"></div>
      <div id="JawBreakerServices">
        <a href="index.php?main_page=index&cPath=3"><img src="includes/templates/candy/images/subscription.gif" alt="Subscription" title=" Subscription " width="100" height="23" /></a>      </div>
    </li>

    <li id="categories_tabs_imgs">
      <div class="cats_tabs_img1">
        <img src="includes/templates/candy/images/icons/icon_Downloadables.gif" alt="Downloadables" title=" Downloadables " width="42" height="38" />      </div>
      <div class="cats_tabs_img2">
        <img src="includes/templates/candy/images/icons/icon_Gift_certificates.gif" alt="Gift Certificates" title=" Gift Certificates " width="42" height="38" />      </div>
      <div>
        <img src="includes/templates/candy/images/icons/icon_JawBreaker_services.gif" alt="Subscription" title=" Subscription " width="42" height="38" />      </div>

    </li>
  </ul>
<!--eof-optional categories tabs navigation display-->

These appear to have been added by hand to the categories_tabs div. Probably in the header.php. There may be an incorrect div, but I see none. In any case, fix the ampersand in the category tabs divs first to narrow the errors and get a clearer picture.

~Melanie

[Website Rob]

http://validator.w3.org/ << will show you your errors

You have some ambiguity here:

</div>
-->
<ul id="categories_tabs">

With a closing Comment tag but no opening tag, your links with the ampersand are not the ones showing on your page.

I now see you do have an opening Comment tag:

<!--<div id="navCatTabsWrapper">

The rest of my post is correct though, as the links with the ASCII Ampersand are commented out.


The other errors I mentioned are on the main site.

The first TD <td id="navColumnOne"
has mismatched closing DIV.

And this error as well:
<div class="centerBoxContentsFeatured centeredContent back" style="width:30%;"<b class="xtop">

[zcnb]

I see you found the shipping & returns link ... cheers!

Yes, down from 8 errors to 7 errors (test site). Thank you!

These appear to have been added by hand to the categories_tabs div. Probably in the header.php

Yes, they were added by hand in tpl_header.php. Not by me, though. I would have never hard-coded something like this.

In any case, fix the ampersand in the category tabs divs first to narrow the errors and get a clearer picture.

I thought I fixed it, but it doesn't seem to be reflected in the resultant HTML. Here is the actual snippet of the PHP code that (I think) is responsible for this:

<!--bof-optional categories tabs navigation display-->
<!--<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>-->
  <ul id="categories_tabs">
    <li id="categories_tabs_main">
      <div id="Downloadables">
        <?php echo '<a href="index.php?main_page=index&amp;cPath=2">' . zen_image($template->get_template_dir(HEADER_CATEGORIES_TABS1, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' .
        HEADER_CATEGORIES_TABS1, HEADER_CATEGORIES_TABS1_ALT) . '</a>'; ?>
      </div>
      <div class="separator1"></div>
      <div id="GiftCertificates">
        <?php echo '<a href="index.php?main_page=index&amp;cPath=4">' . zen_image($template->get_template_dir(HEADER_CATEGORIES_TABS2, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' .
        HEADER_CATEGORIES_TABS2, HEADER_CATEGORIES_TABS2_ALT) . '</a>'; ?>
      </div>
      <div class="separator1"></div>
      <div id="JawBreakerServices">
        <?php echo '<a href="index.php?main_page=index&amp;cPath=3">' . zen_image($template->get_template_dir(HEADER_CATEGORIES_TABS3, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' .
        HEADER_CATEGORIES_TABS3, HEADER_CATEGORIES_TABS3_ALT) . '</a>'; ?>
      </div>
    </li>

    <li id="categories_tabs_imgs">
      <div class="cats_tabs_img1">
        <?php echo zen_image($template->get_template_dir(HEADER_CATEGORIES_TABS1_IMG, DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' .
        HEADER_CATEGORIES_TABS1_IMG, HEADER_CATEGORIES_TABS1_ALT); ?>
      </div>
      <div class="cats_tabs_img2">
        <?php echo zen_image($template->get_template_dir(HEADER_CATEGORIES_TABS1_IMG, DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' .
        HEADER_CATEGORIES_TABS2_IMG, HEADER_CATEGORIES_TABS2_ALT); ?>
      </div>
      <div>
        <?php echo zen_image($template->get_template_dir(HEADER_CATEGORIES_TABS1_IMG, DIR_WS_TEMPLATE, $current_page_base,'images/icons'). '/' .
        HEADER_CATEGORIES_TABS3_IMG, HEADER_CATEGORIES_TABS3_ALT); ?>
      </div>
    </li>
  </ul>
<!--eof-optional categories tabs navigation display-->

I changed all '&' to '&amp;' but the validator yields the same errors...