css quandry - category product listing page.

[herbchina]

So someone says my pages do not meet wc3 standards and I go to work trying to fix.
Then I run into the following.
This is caused because there are multiple items on this page and each one has it's own retail price in the customfield-fullprice .
HOW DO I (LOL) CORRECT THIS?? Any WC3 experts want to chime in, please. The link to this page is http://www.healingherbs.net/category...rbal_Teas.html

_____________________

1. Line 247, Column 54: Duplicate ID customfields-Fullprice.
   …tom-field" id="customfields-Fullprice">Retail Price: <span class="bold">15.95<… ✉
   
2. Line 179, Column 54: The first occurrence of ID customfields-Fullprice was here.
   …tom-field" id="customfields-Fullprice">Retail Price: <span class="bold">7.95</… ✉
   
3. Line 281, Column 54: Duplicate ID customfields-Fullprice.
   …tom-field" id="customfields-Fullprice">Retail Price: <span class="bold">14.95<… ✉
   
4. Line 179, Column 54: The first occurrence of ID customfields-Fullprice was here.
   …tom-field" id="customfields-Fullprice">Retail Price: <span class="bold">7.95</… ✉
   
5. Line 315, Column 54: Duplicate ID customfields-Fullprice.
   …tom-field" id="customfields-Fullprice">Retail Price: <span class="bold">11.95<… ✉
   
6. Line 179, Column 54: The first occurrence of ID customfields-Fullprice was here.
   …tom-field" id="customfields-Fullprice">Retail Price: <span class="bold">7.95</…

[PCINET - Andreas]

You have to change id to class because a id is unique and change it in the CSS file of course too.

[herbchina]

I just went through my Merchant2/css/00000001/cssui.css file and can't find any reference to "customfields-Fullprice"

Any idea why??

[PCINET - Andreas]

If you didn't add it then you of course don't nee to change it. Just remove the id="..." and you should be all good.

[Bruce - PhosphorMedia]

FYI: IDs are usually reserved for CSS that "controls" a singular item on a page. For example, a Show Hide reveal method. If its just styling, unless there is a real need for that styling to be VERY restrictive, one should use a class statement, not an ID.

[herbchina]

FYI: IDs are usually reserved for CSS that "controls" a singular item on a page. For example, a Show Hide reveal method. If its just styling, unless there is a real need for that styling to be VERY restrictive, one should use a class statement, not an ID.

Here is my confusion with what you say:

In my admin I have a "custom fields" tab. In there I have a "Retail Price" field. This is what is being discussed and the reason for the multiple instances of the ID is that this is a CTGY page with multiple items.

Now I did not personally write the code for this "custom fields" tab, so how can I edit (and where) this without screwing something up that is set up as part of the store???

Here also is some of the code from my page source:


<div id="category-header"> </div> <img src="graphics/00000001/Meridiancateg.jpg" alt="Meridian Classics" /> <div id="category-listing"> <div style="width:600px; margin:auto"> <div class="expanded"><div id="filter-items-container"> </div><div class="clear"></div> <div class="product-item" style="width:33%; margin:0; padding:0"> <div class="padding"> <div class="product-details"> <div class="product-thumbnail"> <a href="http://www.healingherbs.net/Meridian_Classics/MC00011.html"><img src="graphics/00000001/anmianwan.jpg" alt="An Mian Wan - Polygalae Calming Pill" /></a> </div> <div class="product-name"><a href="http://www.healingherbs.net/Meridian_Classics/MC00011.html">An Mian Wan - Polygalae Calming Pill</a></div> <div class="product-code">Code: <span class="bold">MC00011</span></div> <div class="custom-field" id="customfields-Fullprice">Retail Price: <span class="bold">14.95</span></div> <div class="product-price">Our Price: <span class="bold">$9.50</span></div> <div class="product-quantity">Quantity in Basket: <span class="italic">none</span> </div> </div> <div class="purchase-buttons"> <form method="post" action="http://www.healingherbs.net/Merchant2/merchant.mvc?Screen=CTGY"> <input type="hidden" name="Old_Screen" value="CTGY" /> <input type="hidden" name="Old_Search" value="" /> <input type="hidden" name="Action" value="ADPR" /> <input type="hidden" name="Quantity" value="1" /> <input type="hidden" name="Attributes" value="Yes" /> <input type="hidden" name="Store_Code" value="HHO" /> <input type="hidden" name="Product_Code" value="MC00011" /> <input type="hidden" name="Current_Product_Code" value="" /> <input type="hidden" name="Category_Code" value="Meridian_Classics" /> <input type="hidden" name="Offset" value="" /> <input type="hidden" name="AllOffset" value="" /> <input type="hidden" name="CatListingOffset" value="" /> <input type="hidden" name="RelatedOffset" value="" /> <input type="hidden" name="SearchOffset" value="" /> <input type="submit" value="Add To Basket" class="button" /> </form> </div> </div> </div> <div class="product-item" style="width:33%; margin:0; padding:0"> <div class="padding"> <div class="product-details"> <div class="product-thumbnail"> <a href="http://www.healingherbs.net/Meridian_Classics/MC00115.html"><img src="graphics/00000001/suanzaorentang.jpg" alt="Suan Zao Ren Tang - Zizyphus Pill" /></a> </div> <div class="product-name"><a href="http://www.healingherbs.net/Meridian_Classics/MC00115.html">Suan Zao Ren Tang - Zizyphus Pill</a></div> <div class="product-code">Code: <span class="bold">MC00115</span></div> <div class="custom-field" id="customfields-Fullprice">Retail Price: <span class="bold">15.95</span></div> <div class="product-price">Our Price: <span class="bold">$10.95</span></div> <div class="product-quantity">Quantity in Basket: <span class="italic">none</span> </div> </div> <div class="purchase-buttons"> <form method="post" action="http://www.healingherbs.net/Merchant2/merchant.mvc?Screen=CTGY"> <input type="hidden" name="Old_Screen" value="CTGY" /> <input type="hidden" name="Old_Search" value="" /> <input type="hidden" name="Action" value="ADPR" /> <input type="hidden" name="Quantity" value="1" /> <input type="hidden" name="Attributes" value="Yes" /> <input type="hidden" name="Store_Code" value="HHO" /> <input type="hidden" name="Product_Code" value="MC00115" /> <input type="hidden" name="Current_Product_Code" value="" /> <input type="hidden" name="Category_Code" value="Meridian_Classics" /> <input type="hidden" name="Offset" value="" /> <input type="hidden" name="AllOffset" value="" /> <input type="hidden" name="CatListingOffset" value="" /> <input type="hidden" name="RelatedOffset" value="" /> <input type="hidden" name="SearchOffset" value="" /> <input type="submit" value="Add To Basket" class="button" /> </form> </div> </div> </div> <div class="product-item" style="width:33%; margin:0; padding:0"> <div class="padding"> <div class="product-details"> <div class="product-thumbnail"> <a href="http://www.healingherbs.net/Meridian_Classics/MC00118.html"><img src="graphics/00000001/TianMaWan.jpg" alt="Tian Ma Wan - Gastrodia Teapills - Meridian" /></a> </div> <div class="product-name"><a href="http://www.healingherbs.net/Meridian_Classics/MC00118.html">Tian Ma Wan - Gastrodia Teapills - Meridian</a></div> <div class="product-code">Code: <span class="bold">MC00118</span></div> <div class="custom-field" id="customfields-Fullprice">Retail Price: <span class="bold">15.95</span></div> <div class="product-price">Our Price: <span class="bold">$10.95</span></div> <div class="product-quantity">Quantity in Basket: <span class="italic">none</span> </div> </div>

[jsdva]

Since it is not specified with the css file, you'll only have to change it in the html. So, just change the the term id to class. You'll have customfields-Fullprice within the CTGY Page >> Category Display Layout tab.

<div class="custom-field" id="customfields-Fullprice">Retail  Price: <span class="bold">14.95</span></div>

Becomes:

<div class="custom-field customfields-Fullprice">Retail  Price: <span class="bold">14.95</span></div>

Jamie

[herbchina]

Thanks for above fixes they are working great.

One more css problem.
How can I replace align="center" to center horizontally a block of text?? everything I try left aligns.

[jsdva]

Thanks for above fixes they are working great.

One more css problem.
How can I replace align="center" to center horizontally a block of text?? everything I try left aligns.

Generally, your text is set in the css file otherwise it is default left, so you have to specify the section you want aligned center. I don't recommend inline styles, but rather inserting into your css file, and then apply the id or class to the section.

For instance, if you have a div id of footer and you want your footer links to align center or the block, you can insert text-align:center; margin:0 auto 0; on the #footer.

Hope this makes sense to you. Can't get any more specific unless I can see what you are referring to and the surrounding html/css.

And, most welcome!

Jamie

[herbchina]

Here's a weird one. How do I correct these as they seem to be generated by the Miva software <?>

1. Line 21, Column 77: & did not start a character reference. (& probably should have been escaped as &amp;.)
   …ealingherbs.net/Merchant2/clientside.mvc?T=9e7512f1&Filename=ajax.js"></script> ✉
   
2. Line 22, Column 77: & did not start a character reference. (& probably should have been escaped as &amp;.)
   …ingherbs.net/Merchant2/clientside.mvc?T=9e7512f1&Filename=runtime.js"></script> ✉
   
3. Line 23, Column 77: & did not start a character reference. (& probably should have been escaped as &amp;.)
   …herbs.net/Merchant2/clientside.mvc?T=9e7512f1&Filename=MivaEvents.js"></script> ✉
   
4. Line 24, Column 77: & did not start a character reference. (& probably should have been escaped as &amp;.)
   …net/Merchant2/clientside.mvc?T=9e7512f1&Filename=AttributeMachine.js"></script>