Announcement

Collapse
No announcement yet.

css quandry - category product listing page.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    css quandry - category product listing page.

    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</…

    #2
    Re: css quandry - category product listing page.

    You have to change id to class because a id is unique and change it in the CSS file of course too.
    Last edited by PCINET - Andreas; 01-22-13, 01:40 PM.
    Andreas Toman
    PCINET, LLC

    Miva Merchant Design, Development, Integration & Support
    We built over 200 Miva Merchant stores!
    Miva shopping cart design & integration service and see our Portfolio!


    e-mail: [email protected]
    web: www.pcinet.com
    LinkedIn: Andreas Toman
    phone: (786) 250-2056 (Miami, FL)

    Comment


      #3
      Re: css quandry - category product listing page.

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

      Any idea why??

      Comment


        #4
        Re: css quandry - category product listing page.

        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.
        Andreas Toman
        PCINET, LLC

        Miva Merchant Design, Development, Integration & Support
        We built over 200 Miva Merchant stores!
        Miva shopping cart design & integration service and see our Portfolio!


        e-mail: [email protected]
        web: www.pcinet.com
        LinkedIn: Andreas Toman
        phone: (786) 250-2056 (Miami, FL)

        Comment


          #5
          Re: css quandry - category product listing page.

          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.
          Bruce Golub
          Phosphor Media - "Your Success is our Business"

          Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
          phosphormedia.com

          Comment


            #6
            Re: css quandry - category product listing page.

            Originally posted by Bruce - PhosphorMedia View Post
            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>

            Comment


              #7
              Re: css quandry - category product listing page.

              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.

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

              Code:
              <div class="custom-field customfields-Fullprice">Retail  Price: <span class="bold">14.95</span></div>
              Jamie
              Jamie Donaldson
              JSDVS Web Design / Development
              Web Design | Web Development | E-commerce Design & Integration

              Comment


                #8
                Re: css quandry - category product listing page.

                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.

                Comment


                  #9
                  Re: css quandry - category product listing page.

                  Originally posted by herbchina View Post
                  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
                  Jamie Donaldson
                  JSDVS Web Design / Development
                  Web Design | Web Development | E-commerce Design & Integration

                  Comment


                    #10
                    Re: css quandry - category product listing page.

                    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>

                    Comment


                      #11
                      Re: css quandry - category product listing page.

                      You ignore them<g>. Seriously, W3C Validation is 'advisory' (and opinionated too). However, its a great tool to help you find serious problems with styles.
                      Bruce Golub
                      Phosphor Media - "Your Success is our Business"

                      Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                      phosphormedia.com

                      Comment


                        #12
                        Re: css quandry - category product listing page.

                        Thanks, Bruce

                        Comment


                          #13
                          Re: css quandry - category product listing page.

                          Hi, just one mystery left on this site.
                          My sitemap link in the global footer is still invisible.>
                          -------------------------------------------
                          Here is the page source for that area:


                          </div> <div id="footer-links"> <ul> <li class="first-child"><a href="http://www.healingherbs.net/SFNT.html">Home</a></li> <li><a href="http://www.healingherbs.net/ABUS.html">About Us</a></li> <li><a href="http://www.healingherbs.net/CTUS.html">Contact Us</a></li> <li><a href="http://www.healingherbs.net/SARP.html">Shipping &amp; Returns</a></li> <li><a href="http://www.healingherbs.net/PRPO.html">Privacy Policy</a></li> <li><a href="http://www.healingherbs.net/FAQS.html">FAQs</a></li> <li><a href="http://www.healingherbs.net/PLST.html">All Products</a></li> <li id="footer-sitemap-link"><a href="http://www.healingherbs.net/SMAP.html">Sitemap</a></li> </ul> </div>

                          Here is the global Footer code:

                          <div id="footer-links">
                          <ul> <li class="first-child"><mvt:item name="cssui_links" param="screen:SFNT">Home</mvt:item></li>
                          <li><mvt:item name="cssui_links" param="screen:ABUS">About Us</mvt:item></li>
                          <li><mvt:item name="cssui_links" param="screen:CTUS">Contact Us</mvt:item></li>
                          <li><mvt:item name="cssui_links" param="screen:SARP">Shipping &amp; Returns</mvt:item></li>
                          <li><mvt:item name="cssui_links" param="screen:PRPO">Privacy Policy</mvt:item></li>
                          <li><mvt:item name="cssui_links" param="screen:FAQS">FAQs</mvt:item></li>
                          <li><mvt:item name="cssui_links" param="screen:PLST">All Products</mvt:item></li>
                          <li id="footer-sitemap-link"><mvt:item name="cssui_links" param="screen:SMAP">Sitemap</mvt:item></li>
                          </ul>
                          </div>

                          Comment


                            #14
                            Re: css quandry - category product listing page.

                            That is because your sitemap link is controlled by #footer-sitemap-link. Change the css on that id to the same way as you did your footer-links.

                            As for the ampersand character: The only way to change links that do not validate is to go with the short links, so that you can control what is in your links. Global Settings >> Domain Settings >> SEO settings

                            As for validation: In my opinion, it is always best to ensure that your code validates. So, do all you can to make that happen. If you cannot go to short links, then yes, you would ignore those errors.

                            Hope this helps,

                            Jamie
                            Jamie Donaldson
                            JSDVS Web Design / Development
                            Web Design | Web Development | E-commerce Design & Integration

                            Comment

                            Working...
                            X