www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 35

Thread: W3 validation problems

  1. #1
    Join Date
    Apr 2013
    Posts
    18

    W3 validation problems

    Hi. I recently discovered that my website has some W3 validation errors that I do not understand. I hope that some of you will be able to shed some light on these errors. I got many errors (up to 72 errors on a page) and they are basically the same throughout the website. Below I have copied the code and the validation errors I get. I have removed a lot of text to shorten it down.

    Here is my code

    <body>

    <div class="container">
    <div class="header">
    <p><br class="clearfloat" />
    </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div id="navMenuWrapper">

    <div id="navMenu">

    <ul>

    <li> <a href="index.html">Home</a> <!-- Hovedpunkt -->
    </li>
    <!-- end main LI -->
    </ul> <!-- end main UL -->

    <ul>

    <li> <a href="#">About nightvision</a> <!-- Hovedpunkt -->

    <ul>

    <li><a href="what_is_night_vision.html">what is night vision</a></li>
    <br /> <!-- Underpunkt -->
    <li><a href="uses_of_nightvision.html">Uses of Night Vision</a></li>
    <br /> <!-- Underpunkt -->
    <li><a href="all_our_night_vision_videos.html">Night Vision Videos</a></li>
    <br /> <!-- Underpunkt -->

    </ul> <!-- end inner UL -->

    </li> <!-- end main LI -->

    </ul> <!-- end main UL -->

    <ul>

    <li> <a href="#">Products</a> <!-- Hovedpunkt -->

    <ul>

    <li><a href="night_vision_for_home_use.html">Night Vision for home use</a></li>
    <br /> <!-- Underpunkt -->
    <li><a href="night_vision_for_professionals.html">Night Vision for professionals</a></li>
    <br /> <!-- Underpunkt -->
    <li><a href="night_vision_for_hunting.html">Night Vision for hunting</a></li>
    <br /> <!-- Underpunkt -->
    <li><a href="night_vision_for_recreational_use.html">Night Vision for recreation</a></li>
    <br /> <!-- Underpunkt -->
    <li><a href="thermal_imaging.html">Thermal Imaging</a></li>
    <br /> <!-- Underpunkt -->
    <li><a href="Accessories_for_night_vision.html">Accessories for Night Vision</a></li>
    <br /> <!-- Underpunkt -->
    <li><a href="All_Nightvision_products.html">All Night Vision products</a></li>
    <br /> <!-- Underpunkt -->
    <li><a href="price_guarantee.html">Price guarantee</a></li>
    <br /> <!-- Underpunkt -->
    <li><a href="rent.html">Rent a device</a></li>
    <br /> <!-- Underpunkt -->
    <li><a href="Additional_Products.html">Additional products</a></li>
    <br /> <!-- Underpunkt -->

    </ul> <!-- end inner UL -->

    </li> <!-- end main LI -->

    </ul> <!-- end main UL -->

    <ul>

    <li> <a href="shipping_and_return.html">Shipping</a> <!-- Hovedpunkt -->
    </li>
    <!-- end main LI -->

    </ul> <!-- end main UL -->

    <ul>

    <li> <a href="special_deals.html">Special deals</a> <!-- Hovedpunkt -->
    </li>
    <!-- end main LI -->

    </ul> <!-- end main UL -->

    <ul>

    <li> <li> <a href="#">About us</a> <!-- Hovedpunkt -->
    <ul>

    <li><a href="About_Us.html">Who we are</a></li>
    <br /> <!-- Underpunkt -->
    <li><a href="about_our_website.html">About our website</a></li>
    <br /> <!-- Underpunkt -->
    <li><a href="get_our_newsletter.html">Get our newsletter</a></li>
    <br /> <!-- Underpunkt -->

    </ul> <!-- end inner UL -->
    </li>
    <!-- end main LI -->

    </ul> <!-- end main UL -->

    <ul>

    <li> <a href="contact_us.html">Contact us</a> <!-- Hovedpunkt -->
    </li>
    <!-- end main LI -->

    </ul> <!-- end main UL -->


    <ul>

    <li> <a href="faq.html">FAQ</a> <!-- Hovedpunkt -->
    </li>
    <!-- end main LI -->

    </ul> <!-- end main UL -->


    <ul>

    <li> <a href="become_a_dealer.html">Dealer info</a> <!-- Hovedpunkt -->
    </li>
    <!-- end main LI -->
    </ul>
    <!-- end main UL -->



    <br class="clearFloat" />

    </div> <!-- end navMenu -->

    </div> <!-- end navMenuWrapper -->
    <!-- end .header --></div>


    <br class="clearfloat" />

    <!-- end .content --></div>
    <div class="footer">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="6%" height="38" valign="top"><div class="g-plusone" data-size="medium"></div>
    <script type="text/javascript">
    (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
    </script>
    &nbsp;&nbsp;</td>
    <td width="9%"><div align="center"><a href="https://twitter.com/share" class="twitter-share-button style6" data-url="http://www.goblinnightvision.com">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    &nbsp;</div></td>
    <td width="13%" valign="top"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.goblinnightvision.com&amp;send=false&amp;layout=button_count&amp;widt h=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="No" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowtransparency="true"></iframe></td>
    <td width="41%" valign="top"><div align="right"><a href="warranty.html"><span class="style13">Warranty</span></a></div></td>
    <td width="1%" valign="top">&nbsp;</td>
    <td width="14%" valign="top"><div align="right"><a href="what_is_night_vision.html"><span class="style13">What Is Night Vision</span></a></div></td>
    <td width="1%" valign="top">&nbsp;</td>
    <td width="7%" valign="top"><div align="right"><a href="get_our_newsletter.html"><span class="style13">Newsletter</span></a></div></td>
    <td width="1%" valign="top">&nbsp;</td>
    <td width="5%" valign="top"><div align="right"><a href="sitemap.html"><span class="style13">Sitemap</span></a></div></td>
    </tr>
    </table>
    <p align="center"><a id="bbblink" class="sehzbum" href="http://www.bbb.org/lexington/business-reviews/night-vision-equipment/goblin-nightvision-in-lexington-ky-9107293#bbblogo" title="Goblin NightVision, Night Vision Equipment, Lexington, KY" style="display: block;position: relative;overflow: hidden; width: 150px; height: 57px; margin: 0px; padding: 0px;"><img style="padding: 0px; border: none;" id="bbblinkimg" src="http://seal-bluegrass.bbb.org/logo/sehzbum/goblin-nightvision-9107293.png" width="300" height="57" alt="Goblin NightVision, Night Vision Equipment, Lexington, KY" /></a><script type="text/javascript">var bbbprotocol = ( ("https:" == document.location.protocol) ? "https://" : "http://" ); document.write(unescape("%3Cscript src='" + bbbprotocol + 'seal-bluegrass.bbb.org' + unescape('%2Flogo%2Fgoblin-nightvision-9107293.js') + "' type='text/javascript'%3E%3C/script%3E"));</script>
    <!-- end .footer --></div>
    <!-- end .container --></div>

    <map name="Map" id="Map"><area shape="rect" coords="2,1,117,131" href="#" /></map>
    <map name="Map2" id="Map2"><area shape="rect" coords="2,1,385,291" href="#" /></map>
    <script type="text/javascript" src="js/default.js"></script></body>

    Here is the validation errors

    Validation Output: 72 Errors

    Line 60, Column 13: document type does not allow element "br" here; assuming missing "li" start-tag
    <br /> <!-- Underpunkt -->

    Line 61, Column 11: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
    <li><a href="uses_of_nightvision.html">Uses of Night Vision</a></li>


    Line 66, Column 12: end tag for "li" omitted, but OMITTAG NO was specified
    </ul> <!-- end inner UL -->


    Line 60, Column 8: start tag was here
    <br /> <!-- Underpunkt -->


    Line 137, Column 9: end tag for "li" omitted, but OMITTAG NO was specified
    </ul> <!-- end main UL -->


    Line 123, Column 6: start tag was here
    <li> <li> <a href="#">About us</a> <!-- Hovedpunkt -->


    Line 304, Column 28: end tag for "p" omitted, but OMITTAG NO was specified
    <!-- end .footer --></div>

  2. #2
    Join Date
    Oct 2012
    Posts
    41
    Remove the br tags between the li tags in your main navigation, they're not valid, and you can use CSS to add a bottom margin to the li elements

  3. #3
    Join Date
    Apr 2013
    Posts
    18
    Dear rh_lloydnorthov,

    Thank you for your help which I appreciate. I am not savvy in CSS. I just started using CSS a couple of months ago. Can you tell me how I should do it?

    Do you have an idea about the other errors I am getting?

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    It would have been more helpful to have provided a link to page so we could see the line numbers at the W3C. Also, not sure what document type you are validating against although guess is XHTML something because of "<br />" used.

    1) Line 60: Break tags are not allowed between list tags.

    2) Line 61: Make sure opening/closing tag pairs match although I think this will disappear after removing break tags.

    3) Lines 66, 60, 137, 123: Probably flagged as errors because of previous errors.

    4) Line 304: No closing "p" tag.

  5. #5
    Join Date
    Apr 2013
    Posts
    18
    Dear Major Payne,

    Thanks for your reply. Yes, I guess that most of these errors is because of the break tags which I have removed. However the problem is when the break tags are removed the menu navigation bar will appear horizontally instead of vertically. Here you can see the W3C error pages. I have put 2 links where you can see the difference in having br tags versus no br tags. And trying to use W3C suggested break tag "<li class="c1"><br /></li>" does not do any good.

    http://validator.w3.org/check?uri=ht...org%2Fservices


    http://validator.w3.org/check?uri=ht...org%2Fservices

  6. #6
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    On your CSS you have:

    #navMenu ul li {
    display: inline;
    }

    That CSS rule displays element(s) inline. Try removing or commenting it out for now after removing break tags. Otherwise, try putting your break tags inside the opening list tags.

    CSS errors. Ignore any properly constructed CSS 3 rules that were flagged as errors. Your CSS file. Look at "body" CSS rules. First "{" is followed by:

    {
    /* Herinde skal al styling til skærme der kører over 1024x768 ligge */
    }
    }

    Try removing the red ones and re-validate.
    Last edited by Major Payne; 04-10-2013 at 12:39 PM.

  7. #7
    Join Date
    Apr 2013
    Posts
    18
    Ok, I removed the

    #navMenu ul li {
    display: inline;
    }

    That did not help. I also tried to put the br inside the li like this:

    <li><a href="what_is_night_vision.html">what is night vision</a><br /></li>

    But this did not help any either.

    Ok, I also removed the red ones as you told me to in the CSS file but I still get an error.

    Oh man, I am getting grey hair because of this;-) I really really appreciate your help because I have been sitting hours and hours on this "small" issue.

    This is my "test file" on W3C http://validator.w3.org/check?uri=ht...org%2Fservices

  8. #8
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    Why do you need the breaks? The nav menu looks good running across the top.
    Last edited by Major Payne; 04-10-2013 at 05:12 PM.

  9. #9
    Join Date
    Apr 2013
    Posts
    18
    Hi. I have uploaded the correction you told me to and it removed a lot of the earlier errors. However now the navigation bar runs horizontally instead of vertically. You can see the horizontal version after the correction here and it should be like this

  10. #10
    Join Date
    Apr 2013
    Posts
    18
    Oh, I meant to say that you need to hoover over the links in the menu bar navigation to see it.

  11. #11
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    This should might work for you: http://pastebin.com/tuG6pxpS Nav menu looks good to me on mouseover.
    Last edited by Major Payne; 04-10-2013 at 07:36 PM.

  12. #12
    Join Date
    Apr 2013
    Posts
    18
    Thank you for your efforts. You truly have been patient and helpful. When I am checking the page using firefox it looks like it should but when using safari the menubar navigation comes down horizontally instead of vertically. I wonder why that is.

  13. #13
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    Just checked my version in Safari and it looks very close to what it looks like in Fx.

  14. #14
    Join Date
    Apr 2013
    Posts
    18
    Hmm, I wonder why we are seeing different things. I have checked www.goblinnightvision.com/test.html in safari, firefox and google chrome and both safari and google chrome shows the dropdown menu bar horizontally instead of vertically.

  15. #15
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    If you are not using the code I posted on Pastebin, then that may be your problem. All errors were removed except for those I have no control over or shouldn't change. See attached images for both browsers using the HTML file on my computer of your page.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles