Validating your site: 34 HTML Errors;

Discussion in 'Web Design and Development' started by Dal123, Aug 21, 2009.

  1. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    Oh Dear :(;
    Checked my webpage in firefox and used the 'developer' toolbar 'Validate local HTML', I got 34 errors :eek:; How do I fix : I thought I'd do it now on my first page and thank-god I did, Imagine after a few pages confused:
    HTML:
    Validation Output:  34 Errors
       1. Error Line 3, Column 1: Missing xmlns attribute for element html. The value should be: http://www.w3.org/1999/xhtml
          <html>
          ✉
          Many Document Types based on XML need a mandatory xmlns="" on the root element. For example, the root element for XHTML will look like:
          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
       2. Error Line 5, Column 74: end tag for "link" omitted, but OMITTAG NO was specified
          … type='text/css' href='layout2.cs…
          ✉
          You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
       3. Info Line 5: start tag was here
          ><link rel='stylesheet' media="screen" type='text/css' href='layout2.css'>
       4. Error Line 7, Column 7: end tag for "head" which is not finished
          </head>
          ✉
          Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>
          Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists (ul, ol, dl) require list items (li, or dt, dd), and so on.
       5. Warning Line 31, Column 125: cannot generate system identifier for general entity "kind"
          …albumid/5352451384466625153?alt=rss&kind=photo&hl=en_GB";
          ✉
          An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".
          Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and æ are different characters.
          If this error appears in some markup generated by PHP's session handling code, this article has explanations and solutions to your problem.
          Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
       6. Error Line 31, Column 125: general entity "kind" not defined and no default entity
          …albumid/5352451384466625153?alt=rss&kind=photo&hl=en_GB";
          ✉
          This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
       7. Warning Line 31, Column 129: reference not terminated by REFC delimiter
          …mid/5352451384466625153?alt=rss&kind=photo&hl=en_GB";
          ✉
          If you meant to include an entity that starts with "&", then you should terminate it with ";". Another reason for this error message is that you inadvertently created an entity by failing to escape an "&" character just before this text.
       8. Error Line 31, Column 129: reference to entity "kind" for which no system identifier could be generated
          …mid/5352451384466625153?alt=rss&kind=photo&hl=en_GB";
          ✉
          This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
       9. Info Line 31, Column 123: entity was defined here
          …d/albumid/5352451384466625153?alt=rss&kind=photo&hl=en_GB";
      10. Warning Line 31, Column 136: cannot generate system identifier for general entity "hl"
          …2451384466625153?alt=rss&kind=photo&hl=en_GB";
          ✉
          An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".
          Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and æ are different characters.
          If this error appears in some markup generated by PHP's session handling code, this article has explanations and solutions to your problem.
          Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
      11. Error Line 31, Column 136: general entity "hl" not defined and no default entity
          …2451384466625153?alt=rss&kind=photo&hl=en_GB";
          ✉
          This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
      12. Warning Line 31, Column 138: reference not terminated by REFC delimiter
          …51384466625153?alt=rss&kind=photo&hl=en_GB";
          ✉
          If you meant to include an entity that starts with "&", then you should terminate it with ";". Another reason for this error message is that you inadvertently created an entity by failing to escape an "&" character just before this text.
      13. Error Line 31, Column 138: reference to entity "hl" for which no system identifier could be generated
          …51384466625153?alt=rss&kind=photo&hl=en_GB";
          ✉
          This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
      14. Info Line 31, Column 134: entity was defined here
          …352451384466625153?alt=rss&kind=photo&hl=en_GB";
      15. Error Line 48, Column 4: document type does not allow element "li" here; missing one of "ul", "ol" start-tag
          <li>3 Flight Mirrored Concrete Staircase</li>
          ✉
          The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
          One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
      16. Error Line 49, Column 4: document type does not allow element "li" here; missing one of "ul", "ol" start-tag
          <li>Cast-in-situ Concrete Staircase</li>
          ✉
          The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
          One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
      17. Error Line 50, Column 4: document type does not allow element "li" here; missing one of "ul", "ol" start-tag
          <li>Concrete Staircase</li>
          ✉
          The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
          One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
      18. Error Line 51, Column 4: document type does not allow element "li" here; missing one of "ul", "ol" start-tag
          <li>2 Flight Staircase</li>
          ✉
          The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
          One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
      19. Error Line 52, Column 4: document type does not allow element "li" here; missing one of "ul", "ol" start-tag
          <li>Waterproof Concrete Basements
          ✉
          The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
          One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
      20. Error Line 53, Column 4: document type does not allow element "li" here; missing one of "ul", "ol" start-tag
          <li>Waterproof Concrete Basement</li>
          ✉
          The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
          One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
      21. Error Line 54, Column 4: document type does not allow element "li" here; missing one of "ul", "ol" start-tag
          <li>Caltite Basement</li>
          ✉
          The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
          One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
      22. Error Line 55, Column 4: document type does not allow element "li" here; missing one of "ul", "ol" start-tag
          <li>Concrete Structures
          ✉
          The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
          One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
      23. Error Line 56, Column 4: document type does not allow element "li" here; missing one of "ul", "ol" start-tag
          <li>Angle Formwork</li>
          ✉
          The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
          One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
      24. Error Line 57, Column 4: document type does not allow element "li" here; missing one of "ul", "ol" start-tag
          <li>Heat-Efficient Roof</li>
          ✉
          The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
          One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
      25. Error Line 58, Column 5: end tag for "li" omitted, but OMITTAG NO was specified
          </ul>
          ✉
          You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
      26. Info Line 55: start tag was here
          s<li>Concrete Structures
      27. Error Line 58, Column 5: end tag for "li" omitted, but OMITTAG NO was specified
          </ul>
          ✉
          You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
      28. Info Line 52: start tag was here
          s<li>Waterproof Concrete Basements
      29. Error Line 58, Column 5: end tag for "li" omitted, but OMITTAG NO was specified
          </ul>
          ✉
          You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
      30. Info Line 47: start tag was here
          s<li>RC Staircases
      31. Warning Line 60, Column 20: unclosed start-tag requires SHORTTAG YES
          <div class="spacer"</div>
          ✉
          The construct <foo<bar> is valid in HTML (it is an example of the rather obscure “Shorttags” feature) but its use is not recommended. In most cases, this is a typo that you will want to fix. If you really want to use shorttags, be aware that they are not well implemented by browsers.
      32. Error Line 7, Column 7: XML Parsing Error: Opening and ending tag mismatch: link line 5 and head
          </head>
          ✉
      33. Error Line 31, Column > 80: XML Parsing Error: EntityRef: expecting ';'
          …m/data/feed/base/user/preciseformworklimited/albumid/5352451384466625153?alt=…
          ✉
      34. Error Line 31, Column > 80: XML Parsing Error: EntityRef: expecting ';'
          …m/data/feed/base/user/preciseformworklimited/albumid/5352451384466625153?alt=…
          ✉
      35. Error Line 58, Column 5: XML Parsing Error: Opening and ending tag mismatch: li line 55 and ul
          </ul>
          ✉
      36. Error Line 59, Column 6: XML Parsing Error: Opening and ending tag mismatch: li line 52 and div
          </div>
          ✉
      37. Error Line 60, Column 19: XML Parsing Error: attributes construct error
          <div class="spacer"</div>
          ✉
      38. Error Line 60, Column 19: XML Parsing Error: Couldn't find end of Start Tag div line 60
          <div class="spacer"</div>
          ✉
      39. Error Line 60, Column 25: XML Parsing Error: Opening and ending tag mismatch: li line 47 and div
          <div class="spacer"</div>
          ✉
      40. Error Line 69, Column 6: XML Parsing Error: Opening and ending tag mismatch: ul line 46 and div
          </div>
          ✉
      41. Error Line 70, Column 7: XML Parsing Error: Opening and ending tag mismatch: div line 45 and body
          </body>
          ✉
      42. Error Line 71, Column 7: XML Parsing Error: Opening and ending tag mismatch: div line 14 and html
          </html>
          ✉
      43. Error Line 71, Column 7: XML Parsing Error: Premature end of data in tag body line 9
          </html>
          ✉
      44. Error Line 71, Column 7: XML Parsing Error: Premature end of data in tag head line 4
          </html>
          ✉
      45. Error Line 71, Column 7: XML Parsing Error: Premature end of data in tag html line 3
          </html>
    A lot of the errors are showing <li> as this part that is invalid, but when I've been reading from w3schools.com and they said that this is how it should be written:<li>list</li>
    I checked in safari and my horizontal list (navbar) does not centre correctly, I positioned each item as 150px wide seeing as though the container is 900. Ideally they would be flush each side with the ruler and spaced easily.
     

    Attached Files:

  2. Joined:
    Jun 30, 2009
    #2
    Why don't you try posting your code? From what I see, you're not using standard XHTML, as in not declaring an XML namespace, and so on. Try posting your code rather than the errors, we can surely run the check ourselves...
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    One problem that seems to be creating a number of errors is that you're not using entities in your URLs when appropriate.

    Incorrect:
    Code:
    somepage.php?id=1[B][COLOR="Red"]&[/COLOR][/B]name=sam
    Correct:
    Code:
    somepage.php?id=1[B][COLOR="Red"]&[/COLOR][/B]name=sam
    You're also missing the xmlns attribute for XHTML.
    HTML:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    Also, since using XHTML, make sure to close all tags.
    HTML:
    <link ... />
     
  4. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #4
    I've had a look on w3schools and I was slightly wrong with my list formatting and have managed to get it down to 21 errors; however my layout is ruined now. Should I sacrifice the errors or percivere and spend lots of time editing, trying to get layout perfect:confused:
    HTML:
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <link rel='stylesheet' media="screen" type='text/css' href='layout2.css'/>
    
    </head>
    
    <body>
    <script src="http://www.google.com/jsapi"
        type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
        type="text/javascript"></script>
    <div id="container">
    <div id="masterhead"></div>
    <div id="navbar">
    <ul>
    <li>home</li>
    <li>services</li>
    <li>previous jobs</li>
    <li>guarantee</li>
    <li>contact us</li>
    </ul>
    <div class="spacer"></div>
    </div>
    <div class="spacer"></div>
    <div id="page_content">
    <div id="slideShow">RC Staircase Loading...</div>
    <script type="text/javascript">
      function LoadSlideShow() {
        var feed  = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5352451384466625153?alt=rss&kind=photo&hl=en_GB";
        var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
        var ss = new GFslideShow(feed, "slideShow", options);scaleImages : true;}
      /**
       * Use google.load() to load the AJAX Feeds API
       * Use google.setOnLoadCallback() to call LoadSlideShow once the page loads
       */
      google.load("feeds", "1");
      google.setOnLoadCallback(LoadSlideShow);
    </script>
    
    <h1>Here is my Header</h1>
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
    <div id="sidebar">
    <ul>
    <li>RC Staircases
    <ul><li>3 Flight Mirrored Concrete Staircase</li>
    <li>Cast-in-situ Concrete Staircase</li>
    <li>Concrete Staircase</li>
    <li>2 Flight Staircase</li>
    <li>Gutter Staircase</li>
    <ul><li>Concrete Frames
    <li>Caltite Basement</li>
    <li>Waterproof Concrete Basement</li>
    <li>Angle Formwork</li>
    <li>Heat-Efficient Roof</li>
    </ul></ul></ul></ul>
    </div>
    <div class="spacer"</div>
    <div class="footer">
    <ul>
    <li>Precise Formwork Limited</li>
    <li>Office:	01708 736500</li>
    <li>Mobile:	07590 657295</li>
    <li>Email:	email@preciseformwork.co.uk</li>
    </ul>
    </div>
    </div>
    </body>
    </html>
    CSS:
    HTML:
    body {
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    }
    
    #container {
    position:relative;
    width:900px;
    height:100%;
    margin:0px;
    padding:0px;
    margin-left:auto;
    margin-right:auto;
    border:0px;
    background-color:#CCCCFF;
    }
    
    #masterhead {
    background-image:url(Images/Graphics/logo_web.gif);
    width:900px;
    height:118px;
    padding:0px 0px 0px 0px;
    margin:0px;
    }
    #masterhead {
    margin-left:auto;
    margin-right:auto;
    }
    #navbar ul{
    list-style:none;
    font:1.5em "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
    margin:0px;
    padding:0px;
    padding-bottom:15px;
    }
    #navbar li {
    display:inline;
    width:150px;
    padding:25px;
    }
    .spacer {
    clear:both;
    }
    /* Slideshow */
    #slideShow {
      width : 400px;
      height : 400px;
      padding : 10px;
    }
    
    #sidebar ul {
    list-style-type:none;
    font:1em "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
    margin:0px;
    padding:0px;
    border:1px solid #000;
    float:right;
    }
    
    #sidebar li {
    background: #CCC;
    width:200px;
    padding-top:0.5em;
    padding-bottom:0.5em;
    padding-right:0.3em;
    border-bottom:0.1em solid#666;
    text-align:right;
    }
    #footer {
    padding:0px;
    margin:0px;
    }
    #page_content {
    width:680px;
    padding:0px;
    float:left;
    border:1px solid #000;
    }
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    For XHTML, when you have in-page script code you need to use CDATA blocks.

    HTML:
    <script type="text/javascript">
    //<![CDATA[
      function LoadSlideShow() {
        var feed  = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5352451384466625153?alt=rss&kind=photo&hl=en_GB";
        var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
        var ss = new GFslideShow(feed, "slideShow", options);scaleImages : true;}
      /**
       * Use google.load() to load the AJAX Feeds API
       * Use google.setOnLoadCallback() to call LoadSlideShow once the page loads
       */
      google.load("feeds", "1");
      google.setOnLoadCallback(LoadSlideShow);
    //]]>
    </script>
    Looks like your sidebar HTML got a bit screwy. Below is what I think you're doing.

    HTML:
    <ul>
      <li>RC Staircases
        <ul>
          <li>3 Flight Mirrored Concrete Staircase</li>
          <li>Cast-in-situ Concrete Staircase</li>
          <li>Concrete Staircase</li>
          <li>2 Flight Staircase</li>
          <li>Gutter Staircase</li>
        </ul>
      </li>
      <li>Concrete Frames
      <li>Caltite Basement</li>
      <li>Waterproof Concrete Basement</li>
      <li>Angle Formwork</li>
      <li>Heat-Efficient Roof</li>
    </ul>
    
     
  6. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #6
    Thanks angelwatt; so far I'm down to 16 errors and 3 warnings. I don't understand why it's giving me error on the document format when I copied it from w3schools:eek:.
    Here is my HTML with 16 errors & 3 warnings:
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <link rel='stylesheet' media="screen" type='text/css' href='layout2.css'/>
    
    </head>
    
    <body>
    <script src="http://www.google.com/jsapi"
        type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
        type="text/javascript"></script>
    <div id="container">
    <div id="masterhead"></div>
    <div id="navbar">
    <ul>
    <li>home</li>
    <li>services</li>
    <li>previous jobs</li>
    <li>guarantee</li>
    <li>contact us</li>
    </ul>
    <div class="spacer"></div>
    </div>
    <div class="spacer"></div>
    <div id="page_content">
    <div id="slideShow">RC Staircase Loading...</div>
    <script type="text/javascript">
      //<![CDATA[
      function LoadSlideShow() {
        var feed  = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5352451384466625153?alt=rss&kind=photo&hl=en_GB";
        var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
        var ss = new GFslideShow(feed, "slideShow", options);scaleImages : true;}
      /**
       * Use google.load() to load the AJAX Feeds API
       * Use google.setOnLoadCallback() to call LoadSlideShow once the page loads
       */
      google.load("feeds", "1");
      google.setOnLoadCallback(LoadSlideShow);
      //]]>
    </script>
    
    <h1>Here is my Header</h1>
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
    <div id="sidebar">
    <ul>
    <li>RC Staircases
    <ul><li>3 Flight Mirrored Concrete Staircase</li>
    <li>Cast-in-situ Concrete Staircase</li>
    <li>Concrete Staircase</li>
    <li>2 Flight Staircase</li>
    <li>Gutter Staircase</li>
    <ul><li>Concrete Frames
    <li>Caltite Basement</li>
    <li>Waterproof Concrete Basement</li>
    <li>Angle Formwork</li>
    <li>Heat-Efficient Roof</li>
    </ul></ul></ul></ul>
    </div>
    <div class="spacer"</div>
    <div class="footer">
    <ul>
    <li>Precise Formwork Limited</li>
    <li>Office:	01708 736500</li>
    <li>Mobile:	07590 657295</li>
    <li>Email:	email@preciseformwork.co.uk</li>
    </ul>
    </div>
    </div>
    </body>
    </html>
    This is what I did to format my list and reduced it by about 10 errors (guesstimation):(but it has messed my layout, though I'm pretty sure all I need to do is play with padding & margins)
    HTML:
    <ul>
    <li>RC Staircases
    <ul><li>3 Flight Mirrored Concrete Staircase</li>
    <li>Cast-in-situ Concrete Staircase</li>
    <li>Concrete Staircase</li>
    <li>2 Flight Staircase</li>
    <li>Gutter Staircase</li>
    <ul><li>Concrete Frames
    <li>Caltite Basement</li>
    <li>Waterproof Concrete Basement</li>
    <li>Angle Formwork</li>
    <li>Heat-Efficient Roof</li>
    </ul></ul></ul></ul>
     
  7. Eraserhead macrumors G4

    Eraserhead

    Joined:
    Nov 3, 2005
    Location:
    UK
    #7
    The main problem is that if you have a <ul> inside another <ul> it should be nested in an <li> first.
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    Here, this validates. Compare and contrast with your code.
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <link rel='stylesheet' media="screen" type='text/css' href='layout2.css' />
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    
    <body>
    <script src="http://www.google.com/jsapi"
        type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
        type="text/javascript"></script>
    <div id="container">
    <div id="masterhead"></div>
    <div id="navbar">
    <ul>
    <li>home</li>
    <li>services</li>
    <li>previous jobs</li>
    <li>guarantee</li>
    <li>contact us</li>
    </ul>
    <div class="spacer"></div>
    </div>
    <div class="spacer"></div>
    <div id="page_content">
    <div id="slideShow">RC Staircase Loading...</div>
    <script type="text/javascript">
      //<![CDATA[
      function LoadSlideShow() {
        var feed  = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5352451384466625153?alt=rss&kind=photo&hl=en_GB";
        var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
        var ss = new GFslideShow(feed, "slideShow", options);scaleImages : true;}
      /**
       * Use google.load() to load the AJAX Feeds API
       * Use google.setOnLoadCallback() to call LoadSlideShow once the page loads
       */
      google.load("feeds", "1");
      google.setOnLoadCallback(LoadSlideShow);
      //]]>
    </script>
    
    <h1>Here is my Header</h1>
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
    <div id="sidebar">
    <ul>
      <li>RC Staircases
        <ul>
          <li>3 Flight Mirrored Concrete Staircase</li>
          <li>Cast-in-situ Concrete Staircase</li>
          <li>Concrete Staircase</li>
          <li>2 Flight Staircase</li>
          <li>Gutter Staircase
            <ul>
              <li>Concrete Frames</li>
              <li>Caltite Basement</li>
              <li>Waterproof Concrete Basement</li>
              <li>Angle Formwork</li>
              <li>Heat-Efficient Roof</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    </div>
    <div class="spacer"></div>
    <div class="footer">
    <ul>
      <li>Precise Formwork Limited</li>
      <li>Office:	01708 736500</li>
      <li>Mobile:	07590 657295</li>
      <li>Email:	email@preciseformwork.co.uk</li>
    </ul>
    </div>
    </div>
    </body>
    </html>
     
  9. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #9
    I'm just checking it out now;
    angelwatt how do you manage to do something in a couple of minutes what has taken me over a week to do :eek:. Is there some cool site that you can load your code into and it fixes faults :p.
    Cheers buddy, I'm trying to find where I went wrong. Thanks again.:)
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    I've dealt with the validators errors long enough that I generally know what they're complaining about with a simple glance, especially for XHTML code. Over time, you just learn what an error message is really telling you, though the descriptions on the validator give some decent insight as well.
     
  11. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #11
    I don't believe it, not a single error!:eek::eek::eek::eek:
    Thanks angelwatt :). You must have lots of money:p certainly know this game.
     
  12. Joined:
    Jun 30, 2009
    #12
    If you're in for the money, I really hope you will never have any customer ;)
     
  13. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #13
    I'm just trying to learn how to do it; my primary goal is to build my own website for my construction business to start getting my own work on price.
    I would much prefer to do this for a living; but I cannot understand the most basic things so I doubt I'll be changing careers :(. I was happy yesterday as my site was really starting to take shape, now I'm gutted as I had a load of errors and what's even worse now is I don't understand how to do an <ul> and my layout is messed up, worst out of everything is that I'm completely baffled :confused:, thought I was starting to understand but I am nowhere close.
     
  14. michael.lauden macrumors 68020

    michael.lauden

    Joined:
    Dec 25, 2008
    #14
    if he needs help on validation from MR forum members.. i'm pretty sure it won't get too far :cool:
     
  15. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #15
    Exactly :p.
     
  16. Eraserhead macrumors G4

    Eraserhead

    Joined:
    Nov 3, 2005
    Location:
    UK
    #16
    <ul> defines the outside of the list, and that contains <li>'s which are items in that list. If you want to insert another list inside the outer list then you have to put it inside an <li> in the outer list, as it needs to be in a list item in the outer list ;).
     
  17. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #17
    The ul syntax for XHTML can take some getting use to, and most WYSIWYG editors screw it up, which is why I hand code everything. Make sure to indent your HTML as well as it will help you more quickly see where you have mismatched tags as you had a few too many closing ul tags in your code earlier. Indentation would help you see that right away.

    A lot of this just takes time to get (practice makes perfect). I'm completely self-taught and do it simply for fun and have come a long way when I made pages in MS Word. Experience is something you can't learn in a book or on a web site, you just have to keep moving forward.
     
  18. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #18
    Thanks Eraserhead, I get confused when placing more than one <ul>, I've read this part of the book about 10 times but just don't understand it, think I should've got it by now :eek:.
    Thanks:)
     
  19. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #19
    Read code, not just books. As in when you see a web site you like, view the source and start learning how its done. Then attend Google University, which means if you see a validation error, search for it and see how others have resolved it. Start doing all this alot and you'll find you start searching less and less over time as you learn. That's how you gain experience. Books help with syntax and examples, but sometimes not with comprehension of larger pricinples as DOING IT is better than SEEING IT. At least I think so.

    In this instance you're using XHTML strict and it's good your delving into this, even though its a struggle, as you're learning how to code in a "strict" manner which means your code, in the end, will be more cross browser compatible than others who use different means.

    It also means you need a sound fundamental understanding of XML - i.e. parent/child relationships in TAGS such as HOW to open/close properly them (i.e. the UL and LI tags and the parent/child relationship there) and when to use CDATA, which means content not intended to be parsed as XML. If you think about it, inline Javascript should not be parsed as XML, so the CDATA wraps the JS code to tell the parser what NOT to do. Once you got the principles, it all makes sense and falls in line.

    The only way to really understand all this is to take the time to view the code of others, read a few online tutorials when you get stuck, and then start coding. Just as you've done.

    You're doing great.

    -jim
     
  20. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #20
    Thanks Jim, was not aware of google university; there are so many things out there don't know about; and most applications are so more powerful than I first thought:).
    I have a collection of all sites that I like and constantly referring to them, great advice. Thanks :D. Can't wait to see this google university, I'm surprised it's not listed on their product list :mad:. I've just been using plain google all these years and really struggling to find stuff.
     
  21. Joined:
    Jun 30, 2009
    #21
    How come you haven't figured it out? He meant learning by Googling, that is, when you don't know something and google it, you learn something new. It was no University...
     
  22. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #22
  23. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #23
    Uh, what I wrote was:

    "Then attend Google University, which means if you see a validation error, search for it and see how others have resolved it."

    hint hint - no applications are taken!

    The links posted by angelwatt are people speculating how nice it would be to actually have Google as an educational data repository plus some links that serve as college level research including some seminars but clearly are not valid state accredited learning institutions with campus and dorm rooms and toga parties. What I meant was very tongue in cheek, i.e. Google has so much information and is such a great way to do research, it's LIKE attending a University. You can even print up your own fake diploma if you wish (plenty of sites to do that). Hope you get it now!

    :D:D:D:D

    -jim
     
  24. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
  25. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #25
    26 errors, 4 warnings.

    I've got another problem, I've created one of my galleries with lightbox2, I validated the site before I got too far into it: 26 errors and 4 warnings. I've searched on these errors and I don't understand what's gone wrong.
    Once again a few on the list tags and I DON"T UNDERSTAND WHY :confused:.
    It's also moaning about:
    HTML:
    <a href="gallery.htm"<li>previous jobs</li></a>
    HTML:
    <a href="images_site/Caltite Basement Welwyn Garden City/1-Waterproof Basement.jpg" rel="lightbox[concrete_basement]" title="Concrete Slab and Kickers cast, 'Caltite' Concrete used throughout; retardant sprayed on kickers to ensure excellent 'dry-joints'"><img src="images_site/images_thumbs/Caltite Basement Welwyn Garden City/1-Waterproof Basement_thumbs_thumbs_thumbs_thumbs.jpg"</a>
    HTML:
    <ul>
    	<li>home</li>
    	<li>services</li>
    	<a href="gallery.htm"<li>previous jobs</li></a>
    	<li>guarantee</li>
    	<li>contact us</li>
    </ul>
    Can anyone point out what I'm doing wrong. Before I fill up the page with a load of poor xhtml.
     

Share This Page