SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31
  1. #1
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    461 Post(s)
    Tagged
    8 Thread(s)

    Spot the Error 3: Calling all Sleuths!

    Code Sleuth Heaven!

    Here is the third Spot the Error Competition. (If you missed the first two, you can find them here and here.)

    The quoted text below (a mock forum question) has quite a few coding errors in it. All you have to do is spot as many errors as you can and list them in your reply. This mock post was cunningly crafted by our own xhtmlcoder, who has a knack for posing curly conundrums and tricky traps for the unsuspecting! Some of the errors below are trickier than others (and some are just plain mean!) so there's a lot of scope for you to be a real sleuth and show off your coding expertise.

    There is extra credit for explaining why something is an error. The winner will be the person who spots the most errors, or who gives the best explanation of what the errors are. (So don't be discouraged if someone beats you to it. Just give a better explanation.)

    xhtmlcoder himself will be the judge of this competition, and the prize for the winner will a free SitePoint ebook.

    Remember that this is just for fun, and lively debate is welcome! Good luck!

    Edit:

    K guys, as of March 12th, xhtmlcoder is going to assess the entries so far to pick a winner, but feel free to keep the thread going.



    So, here is the pretend post. How many errors can you spot?

    Quote Originally Posted by Spot the Error
    Hello SitePointers!

    I am learning markup but I am having problems with my code on two web pages. Someone here said it has lots of errors and they said something about "poor semantics" (I don't really understand what they meant with regards to that strange term; "semantics"?). I would like those errors explaining to me and fixing as I am a newbie. Please help.

    Thanks in advance, Stanley Tweedle

    Search Page code:
    Code:
    <!-- Copyright (C) 2012, Frobozz Training. All Rights Reserved. -->
    <?xml version="1.0" encoding="UTF-8"?>
    <?xml-stylesheet href="frobozz.css" type="text/css"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
        "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
      <head>
        <Title>
          Frobozz Training: Search Course Database
        </title>
        <link rel="stylesheet" href="frobozz.css" type="text/css" />
        <style type="text/css">
           body {  
             background-color: grey;
             }
             /* This section commented out for testing 
            div { margin:100px } /* main section*/
          p {
             margin: 0 1em
            }
          finished testing
            */
        </script><style type="text/css">
         th {
          color: silver;
         }  
        </style>
      </head>
      <body>
        <img src="Logo" title="This a Great Logo" alt="This a Great Logo">
        <div id="box1">
          <div id="_content">
            <h2>
              Course Search Page
            </h2>
            <p>
              Below is a Course Search form enabling you the user to
              search our database on see how many students have
              enrolled on any of our courses which can be selected
              via the dropdown menu:
            </P>
            <form action="search.php" method="get">
              <div>
                <label>Search Places Available by Subject: <select>
                  <option>
                    Basic IT
                  </option>
                  <option>
                    Web Page Design L2
                  </option>
                  <option>
                    Web Page Design L3
                  </option>
                </select></label> <input type="submit"
                values="Search..." />
              </div>
            </form>
            <h2>
              Table of Search Results
            </h2>
           <table>
             <tr>
              <td>
               <th>Course Name</th>
                <table border="1" summary="Results Table">
                <tr>
                <h2>
                  Course Code
                </h2>
                <th><b>
                  <acronym title="Maximum">Max</abbr> <abbr title="Number">no.</abbr></b>
                </th>
                <th>
                  <abbr title="Number">No.</abbr> enrolled
                </th>
              </tr>
              <tr>
                <td>
                  Basic IT
                </td>
                <td>
                  BIT01
                </td>
                <td>
                  30
                </td>
                <td>
                  18
                </td>
              </tr>
              <tr>
                <td>
                  Web Page Design L2
                </td>
                <td>
                  WEB02
                </td>
                <td>
                  20
                </td>
                <td>
                  15
                </td>
              </tr>
              <tr>
                <td>
                  Web Page Design L3
                </td>
                <td>
                  WEB03
                </td>
                <td>
                  16
                </td>
                <td>
                  9
               </tr>
               </table>
              </td>
             </tr>
            </table>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing
              elit. Mauris sodales, lacus quis vestibulum faucibus,
              velit purus lacinia erat, eu suscipit felis urna ut
              sapien.
            <p>
            </p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing
              elit. Mauris sodales, lacus quis vestibulum faucibus,
              velit purus lacinia erat, eu suscipit felis urna ut
              sapien.
            </p>
            <div class="footer">
              <p>
                [<a href=".../home.htm"
                title="Return to Home Page">Return Home</a>]
              </p>
              <p>
              <b>
                Copyright &#copy; 2012, Frobozz Training. All Rights
                Reserved.
              </b>
              </p>
              <div />
            </div>
          </div>
        </div>
      </body>
    </html>
    Feedback Page code:


    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <?xml-stylesheet href="frobozz.css" type="application/javascript"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
        "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <title>
          Frobozz Training: Feedback Page - E-mail Contact Form
        </title>
          <link rel="stylesheet" href="styles.css" type="text/css" />
           <script language="JavaScript" type="text/javascript" />
      </head>
      <body>
        <div id="1box">
          <div id="content">
            <h2>
              Course Feedback Page (Contact us by E-mail Form)
            </h2>
            <p>
              If you would like further information on the courses
              offered by <strong <!-- class="important"-->>Frobozz
              Training</strong>; please feel free to contact us via
              e-mail, we also welcome feedback on this website, so
              why not contact us about any enquires today.
            </p>
            <h6>
              Contact Us about Course Details:
            </h6>
            <br />
            <form method="post"
            action="mailto:example@@example.com"
            enctype="text\plain">
              <fieldset>
                <legend>Enter your Contact Details:</legend><br />
                 <label>Your Full Name:<br />
                 <input name="name" type="text" placeholder="First name"
                alt="Please enter your Fullname so we know how to address our responses." />
                <br />
                <br />
                </label> <label>Your E-mail Address:
                *<br />
                 <input name="email" type="text"
                alt="Please enter your e-mail address so we can respond to your feedback." />
                <br />
                </label><br />
                 <label>Your Comments: *<br />
                 <textarea name="message" rows="1O" cols="64"></textarea><br />
                </label> (*) denotes a required field.<br />
                <br />
                 <input type="submit" value="Send" />
              </fieldset>
            </form>
            <div class="footer">
              <p>
                [<a href="home page.htm" alt="
                Return to Home Page">Return Home</a>]
              </p>
              <p>
                Copyright &copy; 2012, Frobozz Training. All Rights
                Reserved.
              </p>
            </div>
          </div>
        </div>
      </body>
    </html>
    Last edited by ralph.m; Mar 12, 2013 at 06:22. Reason: Corrected a typo in the Spot the Error competition (I know!, ironic isn't it)

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Interesting markup. I have as many comments as flat-out errors.

    Code:
    <!-- Copyright (C) 2012, Frobozz Training. All Rights Reserved. -->
    <?xml version="1.0" encoding="UTF-8"?>
    <?xml-stylesheet href="frobozz.css" type="text/css"?>
    Crap before doctype (though that only matters to IE6 and 7 nowadays, and neither of them can really read this markup)
    The XML declaration isn't bad but I doubt that's what the newbie was going for
    The second XML declaration actually is also ok but also doubt that's what the newbie was going for.

    The OP may have totally meant to use Basic, but then in that case I guess we'd recommend they skip it if they want to target mobiles cause nobody has a Gordon Gecko brickphone anymore.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
        "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    Technically the only thing wrong here is Basic (for mobiles) has a more recent version, 1.1.
    Code:
      <head>
        <Title>
    But if one is going to use XML, lowercase matters. Real Error #1.
    Code:
          Frobozz Training: Search Course Database
        </title>
        <link rel="stylesheet" href="frobozz.css" type="text/css" />
    I suppose the re-stating of the stylesheet in the head will simply override the one listed earlier.
    Code:
        <style type="text/css">
           body {  
             background-color: grey;
             }
             /* This section commented out for testing 
            div { margin:100px } /* main section*/
          p {
             margin: 0 1em
            }
          finished testing
            */
        </script><style type="text/css">
         th {
          color: silver;
         }  
        </style>
    Basic 1.1 supports style tags. I'm not certain but I didn't think 1.0 did.
    Basic 1.1 supports script tags, but 1.0 did not. Error closing script tag without opening script tag anyway. Real error #2.

    Without the error closing script tag, the browsers running this page as XHTML Basic 1.0 may have simply ignored the style tags in the head and moved on. Instead there will now be a parsing error and the world will stop turning.
    Code:
      </head>
      <body>
        <img src="Logo" title="This a Great Logo" alt="This a Great Logo">
    inlines may not be a direct child of the body element. Img is EMPTY and must be closed />. src must be a real URI though depending on the backend this might be a valid URI. 2 real errors.
    Code:
        <div id="box1">
          <div id="_content">
            <h2>
              Course Search Page
            </h2>
    I would not start with an h2. Leading underscore should be totally valid for id name though.
    Code:
            <p>
              Below is a Course Search form enabling you the user to
              search our database on see how many students have
              enrolled on any of our courses which can be selected
              via the dropdown menu:
            </P>
    capitals no no in XML. 1 real error.
    Code:
            <form action="search.php" method="get">
              <div>
                <label>Search Places Available by Subject: <select>
                  <option>
                    Basic IT
                  </option>
                  <option>
                    Web Page Design L2
                  </option>
                  <option>
                    Web Page Design L3
                  </option>
                </select></label> <input type="submit"
                values="Search..." />
              </div>
            </form>
    I think the above is technically correct, since the OP only has Basic forms available since this is Basic version 1.0. I would argue different semantics if the doctype were otherwise, like fieldsets and not wrapping the select with a label, etc.
    Code:
            <h2>
              Table of Search Results
            </h2>
           <table>
             <tr>
              <td>
               <th>Course Name</th>
    The td must be closed before opening a th. Td's cannot be direct parents of th's. Since this is XML we don't get any implied closing block elements. 1 real error.
    Code:
                <table border="1" summary="Results Table">
                <tr>
                <h2>
                  Course Code
                </h2>
                <th><b>
                  <acronym title="Maximum">Max</abbr> <abbr title="Number">no.</abbr></b>
                </th>
    Table cannot be a direct child of tr.
    Basic 1.0 tables can't have border attributes. Tr's must have th or td as direct children.
    Abbr and acronym and b are all fine though. If this were a different doctype, I would recommend different semantics.
    Would recommend h2 become an h3. 3 real errors.
    Code:
                <th>
                  <abbr title="Number">No.</abbr> enrolled
                </th>
              </tr>
              <tr>
                <td>
                  Basic IT
                </td>
                <td>
                  BIT01
                </td>
                <td>
                  30
                </td>
                <td>
                  18
                </td>
              </tr>
              <tr>
                <td>
                  Web Page Design L2
                </td>
                <td>
                  WEB02
                </td>
                <td>
                  20
                </td>
                <td>
                  15
                </td>
              </tr>
              <tr>
                <td>
                  Web Page Design L3
                </td>
                <td>
                  WEB03
                </td>
                <td>
                  16
                </td>
                <td>
                  9
               </tr>
               </table>
              </td>
             </tr>
            </table>
    Here's the closing tag. If there hadn't been a direct-child th earlier, this closing td wouldn't have been considered an error.
    Code:
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing
              elit. Mauris sodales, lacus quis vestibulum faucibus,
              velit purus lacinia erat, eu suscipit felis urna ut
              sapien.
            <p>
            </p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing
              elit. Mauris sodales, lacus quis vestibulum faucibus,
              velit purus lacinia erat, eu suscipit felis urna ut
              sapien.
            </p>
    Code not well-formed: tag nesting mismatch.
    Code:
            <div class="footer">
              <p>
                [<a href=".../home.htm"
                title="Return to Home Page">Return Home</a>]
              </p>
              <p>
              <b>
                Copyright &#copy; 2012, Frobozz Training. All Rights
                Reserved.
              </b>
              </p>
              <div />
    href doesn't appear to be a valid URI.
    I think if this were purely considered XML the div would be fine. Since this is XML as Basic XHTML this may not be allowed. I would run it through the Basic validator to know for sure.
    Code:
            </div>
          </div>
        </div>
      </body>
    </html>


    My take on the first one.

  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Good attempt, though there are still quite a few you haven't caught yet... Chocolate mouse catcher. At least one, I do know Paul would see. But you do get "Extra Bonus points" for being the first person to dare make a 'first-attempt'. So at least I know you haven't copied off anyone. So keep trying; so far you've spotted some, have another look and you'll find some more to add to your list...

    Actually, Poes I think most of the SPF members are too sacred to enter - I promise not to bite. Else they're waiting for the first intrepid explorer to give them a clue where "X" marks the spot. :-)

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Paul would find the mismatching CSS comments /* */ in
    Code:
     <style type="text/css">
           body {  
             background-color: grey;
             }
             /* This section commented out for testing 
            div { margin:100px } /* main section*/
          p {
             margin: 0 1em
            }
          finished testing
            */
    I also initially missed the mis-nested <style> tags in the <head>... but now it explains the closing script tag was probably meant to be style.

  5. #5
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,289
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    It's been ages since I've had the time to take something like this on. I'm sure I missed quite a few (and I'm sure once I read Poes, I'll be slapping my head).

    Search Page Code



    1. Not really an error, but an fyi - <?xml directives will cause IE to go into quirks mode.
    2. Is XHTML basic really what the user wants? It's supposed to be limited to mobile only. Strict or Transitional are typically more appropriate.
    3. html element should have a lang="en" attribute
    4. Title element has capitalization difference - xhtml elements must be lower case (see: www.w3.org/TR/xhtml1/)
    5. */ on /* main section */ will cause css rendering issues
    6. No need for second style element. Should combine with first.
    7. img is a self closing element so should end in />. Src is also bogus
    8. p element capitalization error. Must be lower case - see: www.w3.org/TR/xhtml1/
    9. headings aren't appropriate - first heading should be h1, next section h2, and such. Size should be controlled via css.
    10. no need for div inside of form
    11. label has no for attribute to tie it to element (not critical, but helpful)
    12. no name attribute on select
    13. No values for option elements
    14. values is not a valid attribute - should be value
    15. Search Results Table is toasted.
      1. Course Name th is "nested" inside a td. Move it above the td and wrap it in a tr element.
      2. Results Table is supposed to be a nested table, but is not included in any element.
      3. h2 is a block element, which cannot be in another block element. It either needs to be a th
      4. the first row of that table is missing an element (column heading)
      5. on base behavior, there's no need for the bold inside the th, which displays as bold natively.

    16. the closing paragraph tag is swapped with the opening paragraph tag for the next paragraph.
    17. href in footer has an incorrect relative reference the ... should be ..
    18. empty div in the footer - no point...



    Feedback Page Code



    1. Not really an error, but an fyi - <?xml directives will cause IE to go into quirks mode.
    2. type="application/javascript" is not valid for the xml-stylesheet. Should be type="text/css"
    3. Is XHTML basic really what the user wants? It's supposed to be limited to mobile only. Strict or Transitional are typically more appropriate.
    4. script element has no src, nor any inside text
    5. div id elements should NOT start with numbers
    6. comment should be not in the middle of the strong element
    7. headings are not appropriate. h2 should be h1, h6 should be h2. Sizes should be styled via css
    8. mailto:example@@example.com should be mailto:example@example.com
    9. input elements does not support the alt attribute except for images
    10. placeholder is an html5 attribute, not xhtml
    11. rows should say 10, not 1o
    12. href should use title instead of alt

    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Actually...

    dave said:
    no need for div inside of form

    However forms may not contain inlines as direct children... so some block is needed, and can't be a fieldset since Basic1.0 doesn't have those.

    dave said:
    label has no for attribute to tie it to element (not critical, but helpful)

    However since the inputs are inside the labels, they are implicitly linked (with for-id pairs they are explicitly linked.. it is not recommended to do both at the same time though you could). Meaning other than IE6 (who can't read this markup anyway), you *should* get the same behaviour as a for-id setup would.

    dave said:
    No values for option elements

    It's an implied attribute if not explicitly listed. I suppose the idea was the form should send the implicit values (which would be the cdata between the option tags) instead.


    Dave definitely caught a few I missed.

  7. #7
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Good job I can see more than both of you. ;-) Though yes apart from one a two minor mistakes Dave, some which Poes mentioned we are getting a little closer.

    Ralph, I wonder if your SPF Design Team dare show their faces and enter? LOL >;-)

  8. #8
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,289
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    I'm not super familiar with Basic so I'm not surprised I missed those - like I said, I thought it might be a bad docType choice which is why I answered the way I did.

    As for the rest, now you made me go look....there's a couple bonheaded ones I missed for sure..... *sigh*

    Search Page Code



    1. Display issue - assuming there's no background-color defined in the css file, color: silver on the th will be almost invisible on the background color: grey of the page.
    2. The copyright html entity is wrong (shoulda caught that the first time - grrrr)
    3. technically, the <b> should be <strong>, but that's one of those contested deprecations which people still use, so I let it go the first time....
    4. I kinda covered it when I mentioned that the second style tag wasn't needed (meaning that middle should be removed, but there's a closing script element which should be style.
    5. There's an acronym opening element, but an abbr to close.



    Feedback Page Code


    1. Design type - There are a lot of <br /> elements, which while technically can be used like this, would be better served handled via css (especially the one after the heading)
    2. the enc type on the form is wrong it should be text/plain not text\plain - I had actually caught that the last time but forgot to denote it. oops!
    3. semantically, the <br /> elements should be outside the label elements (though see #1 regarding the use of them...)

    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  9. #9
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Yes, I purposely choose the code to make it tougher as that member of the Family has elegance - without me giving away any spoilers. I knew where you were coming from so it was all good. Discussion is good. Explanations are also good, they show your thought processes, and help exercise the grey-matter etc. :-)

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Yeah I thought the XHTML Basic doctype was interesting enough I decided to go on as if the OP were going to stick to that doctype, for whatever reason... makes it more interesting. Especially since Basic 1.0 is so much more primitive than Basic 1.1, it leaves out so many attributes and elements we take for granted with full XHTML/HTML.

    If someone were to say "well, the OP should change the doctype to X" then it would be a whole different set of errors and recommendations which makes this even more interesting.


    And Dave...
    Design type - There are a lot of <br /> elements
    Also, the prominent space in there that was a workaround for Nutscrape 4, or 7, I forget which... since for everyone else in the universe <br/> would be just fine : P


    Dave caught even more that I also should have seen... esp the copy and mismatched acronym/abbrs and valueS attribute...

    Quote Originally Posted by robert
    Ralph, I wonder if your SPF Design Team dare show their faces and enter? LOL >;-)
    Haha, I did expect Eric Watson or Dresden Phoenix to be in here already :P But it's early.

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    My contribution to the Search Page Code (with apologies for repeating anything already identified).
    I included some surrounding lines so the location might be clear.

    Code:
                    <h2>    <!-- SHOULD NOT BE INSIDE TABLE -->
                        Course Code
                    </h2>
                    <table border="1" summary="Results Table">
                    <tr>  <!-- ONLY 2 TH TAGS but 4 COLUMNS and these seem to be for columns 3 and 4 -->
                        <th><b><abbr title="Maximum">Max</abbr> <abbr title="Number">no.</abbr></b></th>
                        <th><abbr title="Number">No.</abbr> enrolled</th>
                    </tr>
    The number of <th> tags does not match the number of columns in the succeeding rows (should fit 4 columns). As is, they would reside over the wrong columns.
    Code:
                        <td>
                            16
                        </td>
                        <td>
                            9
                        </td>  <!-- MISSING TAG -->
                    </tr>
                    </table>
                </td>
    We seem to be missing a close </td> tag in the last row of this table
    Code:
              <b>
                Copyright &#copy; 2012, Frobozz Training. All Rights
                Reserved.
              </b>
              </p>
    <!--      <div />    <!-- SHOULD BE DELETED -->
            </div>
        </div>
    </div>
    </body>
    The ill-formed <div /> tag should be deleted, lest there be too may </div>s.

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    The only things I noticed on the Feedback page that I don't think have been mentioned are:


    Code:
    <script language="JavaScript" type="text/javascript" />
    Line 11: the <script> tag is improperly closed </script>

    Code:
    offered by <strong <!-- class="important"-->>Frobozz
    Line 21: malformed <strong> tag; the gt symbol is out of place.

  13. #13
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    So far we've had a couple of Code cats try; two SPF staff members and one past, so far they are on the right path. Though there are still some more errors I can see. So keep trying guys. ;-)

    I wonder if the low entry number so far, is because the rumours are true; many of the members on SPF require WYSIWYG Editors to do their coding? ;-)

    It would certainly explain why only 3 thus far have had the courage to enter. I commend those three so far for spotting several errors and each one by the looks of things have seen different 'errors'. Usually the first three are the smartest because they don't need to copy but surely someone else can find/fix some more errors...

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,045
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hodwy,

    I'm not sure how much of a sleuth I am, but this is what I noticed:

    Search Page code:
    1. No Character encoding was declared within the <head> section of the document.
    2. The <title> tag starts with a capital "T"
    3. There is a closing </script> tag which was never opened
    4. Following that there is a closing </style> tag missing
    5. The <img> tag should be shut with "/>" instead of ">"
    6. Paragraph shuts with an uppercase </P>. This is an error
    7. In this "values" should be singular: <input type="submit" values="Search..." />
    8. The table is malformed, having more cells than headings
    9. <acronym title="Maximum">Max</abbr> mismatching tags
    10. <div /> is obviously wrong
    11. &#copy; should have been &copy;
    Feedback Page code:
    1. This just looks wrong: xml:lang="en" lang="en"
    2. language="Javascript" is wrong: <script language="JavaScript" type="text/javascript" />
    3. The id cannot start with a digit: <div id="1box">
    4. There is a malformed <strong> tag: <strong
    5. Placeholder attribute wasn't introduced until HTML 5: placeholder="First name"
    6. The input cannot have an alt attribute: <input name="name" ... alt="Please enter your ...
    7. The anchor tag cannot have an alt attribute: <a href="home page.htm" alt="
    It must be said that the mark-up is really tricky and several times I thought I'd found an error, when I hadn't.
    Hat's off, Robert!

  15. #15
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Good attempt Dave. Yes, you spotted some good tricky ones there and it's nice to see the SPF Programming Team have now put forward a competitor. Though to everyone there are still some more errors so keep 'em coming, we are getting closer. Come on give it a try even if you are a newbie you should spot some errors don't feel embarrassed if you cannot find many we've had four people attempting and they found different errors and all missed a few. :-)

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Haven't had much time to look at this but here's a couple of comments on the css.


    Code:
    <link rel="stylesheet" href="frobozz.css" type="text/css" />
    <style type="text/css">
    body { background-color: grey; }
    /* This section commented out for testing 
            div { margin:100px } /* main section*/
          p { margin: 0 1em }
     finished testing  */  </script><style type="text/css">  th {
     color: silver;
    }
    </style>
    (Assuming the basic doctype was a mistake otherwise the style tag and type attribute would not be valid for the document.)

    1) There's no media attribute on the link tag which is not invalid but should be specified for the required media.

    2) body { background-color: grey; }

    There's no colour keyword for "grey" in css2.1. It is "gray" to be valid. Grey has been added to css3 in the extended colour keyword module. IE6 will ignore grey and uses only "gray". It would also be more concise to use the shorthand "background" instead of "background-color" as no other rules have been applied.

    3) The section has been commented out but the author has not noticed that there were nested comments in the middle of the section which will have the effect of cutting the comments short.

    Therefore the only section commented out will be this:
    [code]
    /* This section commented out for testing
    div { margin:100px } /* main section*/
    [code]

    Which will leave the only valid (css2.1) code to be this:

    Code:
      p { margin: 0 1em }
    4) Setting a 1 em side padding on all p elements is a silly thing to do globally as it is unlikely you would want all p elements styled like that. The same applies to div{margin:100px} if it wasn't commented out. Specifying styles globally like that lead to maintenance problems where you have to continually over-write settings you have made. A default rule would be one that you are likely to use in most cases.

    5) Due to the nested comments the following section will be invalid:

    Code:
     finished testing  */  </script><style type="text/css">  th {
     color: silver;
    }
    6) The closing script tag is an error and should be a closing style tag and although the new style element is ok the rules could have been included in the first one to save code.

    7) If the nested comments were fixed then the contrast between the grey background colour and the silver of the th would be no good and the text be almost invisible.



    I probably missed the obvious ones as its getting late here and I'm tired.

  17. #17
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Paul, it looks like you spotted most of those CSS issues I wrote. Even after a full day's work you still produce the goods... I think how you phrased the 'potential CSS issues' might be slightly better that I would have explain them, when I provide the Judge's Feedback next week sometime - all good catches and well explained. :-)

    Regarding everyone who has yet to compete and any of the others that want to find the other "unspotted" errors keep trying there are still a few left to detect.

  18. #18
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,289
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Only other thing I see (other than the blatantly obvious stuff Paul caught that I should have...) short of spelling/grammar errors is

    css files are different from one page to the other. Not necessarily wrong, but may cause consistency problems.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  19. #19
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Well, spotted, yes that is the one I was thinking of regarding CSS. Like you say more a discussion point, which could lead to unexpected results - as far as the web author/browser goes - there was a reason for two web page files to compare and contrast with both. I think that more-or-less covers all the CSS pitfalls I wrote.

    There is at least another - very subtle and sneaky issue to find almost Red herring - that is a similar vein - though not CSS.

  20. #20
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Actually Ralph @ralph.m ; might spot that one, he likes wordplay and the clue is clearly visible in the last sentence - in my prior post - and elsewhere other than post #1 and it isn't Greek.

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    461 Post(s)
    Tagged
    8 Thread(s)
    K guys, as of March 12th, xhtmlcoder is going to assess the entries so far to pick a winner, but feel free to keep the thread going.

  22. #22
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Greetings everyone

    On behalf of our forum administrator HAWK, and the rest of SitePoint forum Staff, I personally (Robert Wellock) as your leading Competition Judge (JUDGEcoder) for this competition; fanfare, please.

    Would like to inform you all that: Spot the Error 3: Calling all Sleuths! Has now been judged and we'd like to announce the:

    COMPETITION PRIZE WINNER!

    The competition prize is as follows:

    1st prize - a SitePoint ebook of choice

    The winning SPF member is as follows:

    1. Stomme poes

    Well done Poes

    We've had some good entries from five members with different types of skillset and the judging was pleasurable. I'd like to thank everyone on that has submitted a competition entry: @DaveMaxwell ; @Paul O'B ; @Pullo ; @ronpat ; and @Stomme poes ; (winner).

    Things regarding semantics and valid markup were considered during the judging process as will be seen within my feedback plus observations of the competitors discussions and how they pulled together to help one another. There was a variety of strengths and weaknesses in all the entries so attention to detail mattered.

    Again, I'd like to thank everyone that has submitted a competition entry and congratulate the winning member.

    Alas Poes, the prize wasn't a Golden Ticket granting the owner with passage into Willy Wonka's factory and a lifetime supply of confectionery though it is the gift of knowledge, in the form of a SPF ebook.

    The SPF staff, especially Dave regarding his dogged-determination did provide some good quality "SPF Staff Entries". The other three are also to be commended for their efforts. Plus Ralph for doing a great intro...

    I hope those who have competed fully enjoyed themselves and found the task "challenging" and have had as much fun as I have it's the taking part that counts.

    With luck maybe in the future we'll run another 'Spot the Error' competition on a slightly different theme. May the Source code be with you.

    Thankee
    JUDGEcoder


    Robert Wellock

  23. #23
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Spot the Error 3: Calling all Sleuths! Judge Feedback

    Since there were few entries in number though nonetheless some very good entries. I thought I'd write some feedback regarding both; potential errors with the two 'web pages' for the mock forum question or just general discussion regarding those two code samples: 'Search Page' and 'Feedback Page' respectively.

    Most of the errors were far easier to spot than they first appeared assuming you used a good methodical approach when detecting... Though I do appreciate there were some really 'tricky errors' and potential errors. Even possibly red herrings making it more like minefield in places. Also it was more difficult than that average SPF post since the Competitors couldn't directly communicate with 'Stanley Tweedle' the fictitious 'Original Poster' of the thread.

    The basic way I'd probably approach those two pages to "check for errors" would be to copy the two pieces of code into my code editor and create two files: search.htm and feedback.htm

    Therefore I could display them within my browser and have syntax colour highlighting and obviously edit them. Firstly, my browser is automatically set to check the markup for errors via a HTML Validator so it will list some potential problems. Though remember a Validator will only give you a 'loose idea' and may highlight false positives or mislead you as to where an error appears, etc. This is the case if the page markup tends to be really mangled and you get a "cascade of errors". Though using the validation software tends to help give your eyes a small rest if it highlights potential error lines to tackle. Experience also comes into play here so you still need to know your stuff and to be able to target, pinpoint or comment out code to get to the bottom of those errors.

    For the purpose of this simple exercise we'll assume XHTML Basic 1.0 throughout.

    Although of course like the competitors mentioned (and I agree) Stanley might have meant to have written either: XHTML 1.0 Strict, XHTML Basic 1.1 or XHTML 1.1. I cunningly wrote as Basic 1.0 purely to slowdown the 'more experienced' hardcore competitors. Though in most cases; Strict or 1.1 would be a good bet. Unless there was a pressing reason to use the stripped-down Basic Doctype - serving to such as some limited capability mobile devices, etc. Though as stated the question was presented as XHTML Basic 1.0.

    So let's begin, this is what my browser HTML Validator reported (assuming XHTML Basic 1.0)

    File: search.htm

    Code:
    Result: 28 errors / 0 warnings
       
      line 8 column 10 - Error: element "Title" undefined
      line 10 column 11 - Error: end tag for element "title" which is not open
      line 12 column 16 - Error: there is no attribute "type"
      line 12 column 26 - Error: element "style" undefined
      line 23 column 12 - Error: end tag for element "script" which is not open
      line 23 column 35 - Error: element "style" undefined
      line 28 column 8 - Error: end tag for "style" omitted, but OMITTAG NO was specified
      line 12 column 4 - Info: start tag was here
      line 28 column 8 - Error: end tag for "Title" omitted, but OMITTAG NO was specified
      line 8 column 4 - Info: start tag was here
      line 28 column 8 - Error: end tag for "head" which is not finished
      line 30 column 69 - Error: document type does not allow element "img"  here; missing one of "h1", "h2", "h3", "h4", "h5", "h6", "p", "div",  "address" start-tag
      line 30 column 70 - Error: end tag for "img" omitted, but OMITTAG NO was specified
      line 30 column 4 - Info: start tag was here
      line 41 column 11 - Error: end tag for element "P" which is not open
      line 42 column 46 - Error: document type does not allow element "form" here; assuming missing "object" start-tag
      line 55 column 19 - Error: there is no attribute "values"
      line 64 column 14 - Error: document type does not allow element "th" here
      line 65 column 26 - Error: there is no attribute "border"
      line 65 column 53 - Error: document type does not allow element  "table" here; missing one of "object", "div", "blockquote", "form"  start-tag
      line 67 column 15 - Error: document type does not allow element "h2" here; missing one of "th", "td" start-tag
      line 70 column 18 - Error: element "b" undefined
      line 71 column 48 - Error: end tag for element "abbr" which is not open
      line 71 column 84 - Error: end tag for "acronym" omitted, but OMITTAG NO was specified
      line 71 column 14 - Info: start tag was here
      line 117 column 15 - Error: end tag for "td" omitted, but OMITTAG NO was specified
      line 115 column 12 - Info: start tag was here
      line 127 column 10 - Error: document type does not allow element "p" here; assuming missing "object" start-tag
      line 133 column 11 - Error: end tag for "object" omitted, but OMITTAG NO was specified
      line 127 column 8 - Info: start tag was here
      line 140 column 12 - Error: element "b" undefined
      line 141 column 24 - Error: "copy" is not a function name
      line 147 column 11 - Error: end tag for "object" omitted, but OMITTAG NO was specified
      line 42 column 8 - Info: start tag was here
      line 147 column 11 - Error: end tag for "p" omitted, but OMITTAG NO was specified
      line 36 column 8 - Info: start tag was here
    Now, that will look really scary to some of you, as if it were written in some arcane long lost ancient language and make as much sense a hieroglyphics to others. Though now we have a clue or some potential error lines.

    We know we're dealing with XHTML, so well-formedness constraints will be in effect, which will help with correcting some of the more obvious errors. So without haste we'll open the second file and have a peak.

    File: feedback.htm

    Code:
    Result: 12 errors / 0 warnings
       
      line 5 column 62 - Error: there is no attribute "lang"
      line 11 column 24 - Error: there is no attribute "language"
      line 11 column 42 - Error: there is no attribute "type"
      line 11 column 61 - Error: element "script" undefined
      line 14 column 13 - Error: value of attribute "id" invalid: "1" cannot start a name
      line 21 column 29 - Error: unclosed start-tag requires SHORTTAG YES
      line 33 column 19 - Error: element "fieldset" undefined
      line 34 column 19 - Error: element "legend" undefined
      line 36 column 56 - Error: there is no attribute "placeholder"
      line 37 column 16 - Error: there is no attribute "alt"
      line 52 column 14 - Error: end tag for "form" which is not finished
      line 55 column 41 - Error: there is no attribute "alt"
    If you haven't fallen asleep by now we can see the second file potentially has fewer errors. Beware though it's only a tool so note; it won't ever beat a good veteran Coder for spotting; semantic best practice; certain erroneous attribute values; or web accessibility judgement calls, etc.

    So now let's have a closer look at some of the potential reported errors, etc.


    Analysis of File: search.htm

    Like I was just saying the Validator cannot beat a good coder; the first line is erroneous - we know the document is XHTML and is using a XML declaration - so this file cannot start with a comment; whitespace cannot precede it either.

    HTML Code:
    <!-- Copyright (C) 2012, Frobozz Training. All Rights Reserved. -->
    Our next error is the TITLE element the "Title" not defined in this markup version.

    HTML Code:
    <Title>
     [...]
    </title>
    All elements are case sensitive and should be lowercase in XHTML so the start tag should be: <title> all lowercase.

    Having a short detour into the "World of CSS", we know Basic 1.0 doesn't allow the STYLE element - Parsed Character Data (PCDATA). Albeit for XHTML documents that allow STYLE wrap the content of the style element within a CDATA marked section to avoid expansion of entities.

    HTML Code:
    <style type="text/css">
    /*<![CDATA[*/
    
    /*]]>*/
    </style>
    The only time I would add a STYLE is during a test mock-up on a standalone document and then I rarely do that, I suspect Stanley was attempting the same going by his CSS comments.

    Code:
    Line  2  body Value Error : background-color grey is not a color value : grey 
    Line 14  finished testing *     Parse Error */ th { color: silver; }
    If you were to run the CSS through the W3C Validator you'd receive error messages as above. The Spelling of the colour Grey within CSS is Gray.

    Code CSS:
    body {  
             background-color: grey;
             }

    Further down we have some erroneous nested comments, we'll hazard a guess the web author was temporally attempting to comment out all of the following CSS.

    Code CSS:
    /* This section commented out for testing 
            div { margin:100px } /* main section*/
          p {
             margin: 0 1em
            }
          finished testing
            */

    CSS Comments begin with the characters "/*" and end with the characters "*/". They may occur anywhere outside other tokens, and their contents have no influence on the rendering. Comments may not be nested.

    The studious would notice also the colour contrast between 'color name' value: gray (#808080) and silver (#c0c0c0) is quite low, which might hinder legibility.

    Going back to the Markup Realm...

    Quite simply there are no SCRIPT or STYLE elements in Basic 1.0, though it looks like Stanley was testing his CSS...

    HTML Code:
    </script><style type="text/css">
    Even if STYLE was allowed the closing SCRIPT tag would be erroneous...

    The IMG elements are inline so must be contained in a block level element. Furthermore it's an EMPTY element so needs to be closed. In addition as a point of interest usually the filename has an extension, i.e. *.png so most likely we've spotted another issue.

    HTML Code:
    <img src="Logo" title="This a Great Logo" alt="This a Great Logo">
    Easter egg: to top it off note the 'duplicated text' of the ALT and TITLE attributes that is of course bad practice. Let alone Stanley might be dyslexic "This [is] a Great Logo" of course these two issues weren't to be scored but points of note.

    Next, we shall note: <div id="_content"> isn't an error for the ID value to start with an underscore in XML but wouldn't be valid in HTML 4.01.

    Again, we have an erroneous uppercase tag.

    HTML Code:
    <p>
      Below is a Course Search [...]
    </P>
    In this case, a closing uppercase P tag, leaving a mismatch.

    Considering the FORM, since we are dealing with Basic 1.0, unfortunately we cannot make use of the FIELDSET or LEGEND elements thus the DIV appearing directly after the start FORM tag is suitable.

    HTML Code:
    values="Search..." />
    Obviously there is no attribute 'values' for this element it should be 'value' of course.

    Going onto the TABLE something obviously went wrong there when Stanley wrote it; for starters there is a nested TABLE element, which is not allowed in Basic 1.0 (nesting of tables is prohibited). Furthermore just by viewing the page in a browser it is noticeable the cell layouts aren't correct.

    The second TABLE start tag: <table border="1" summary="Results Table"> should probably have been in the place of the first. Though yet again, we notice another error; the border attribute, Presentational and thus not supported. So instead will assume the TABLE was meant to read: <table summary="Results Table"> and removing the nesting would now make the data table look more sensible. Since then the TH would make sense when stripping the nesting. We can then address the following:

    HTML Code:
    <h2>
      Course Code
    </h2>
    Obviously using the above logic the chances are that is supposed to be a TH element not H2.

    So we would be aiming for the following as table headers: Course Name, Course Code, Max no., No. enrolled. That would make 4 columns; matching those 12 cells below them.

    HTML Code:
    <th><b>
       <acronym title="Maximum">Max</abbr> <abbr title="Number">no.</abbr></b>
    The bold element is not defined in this Basic 1.0; already we have TH so that B wants removing. The start ACRONYM tag should undoubtedly be a start ABBR tag.

    Following on the next issue the two paragraphs as follows:

    HTML Code:
    <p>
      Lorem ipsum [...]
    <p>
    </p>
      Lorem ipsum [...]
    </p>
    Both are missing opening or closing tags respectively.

    HTML Code:
    [<a href=".../home.htm"
    The relative path should not contain three dots, it should be two; dot-dot-slash.

    The copyright strap doesn't require any 'none supported' presentational elements, i.e. Bold and obviously has a malformed entity, for the Copyright sign.

    HTML Code:
    <b>
      Copyright &#copy; 2012, Frobozz Training. All Rights
    The symbol should be a Numeric Character Reference (NCR) preferably in Hex, i.e. &#xa9; (lowercase) as we are using XHTML.

    Alas the empty <div /> is pointless so needs trimming.


    Analysis of File: feedback.htm

    The second document is a little easier, as we know is XHTML so you can associate Style Sheets with XML documents by including one or more Processing Instructions with a target of xml-stylesheet in the document's prolog.

    HTML Code:
    <?xml-stylesheet href="frobozz.css" type="application/javascript"?>
    However, clearly the MIME type is meant to be 'text/css' not 'application/javascript' so I think Stanley got confused here.

    Since we are using Basic 1.0, the lang="en" is redundant (for legacy user-agents) since it is expected the 'application/xhtml+xml' media type is likely to be assumed.

    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    Hence there is no attribute 'lang' for this element (in this XHTML version).

    A small but interesting point with the following:

    HTML Code:
    <link rel="stylesheet" href="styles.css" type="text/css" />
    Most likely the stylesheet name should match the one at the top of the page and thus be named: frobozz.css

    HTML Code:
    <script language="JavaScript" type="text/javascript" />
    Quite simply, element SCRIPT is not defined in this XHTML version.

    HTML Code:
    <div id="1box">
    The value of attribute ID must start with a letter, tokens must begin with a letter to be backwards compatible ([A-Za-z]) thus cannot start with; 1 and if you refer to the other file we'll assume it should be called: 'box1'.

    HTML Code:
    offered by <strong <!-- class="important"-->>Frobozz
    Really there is no need for strong here however the comment delimiters are not allowed within the start STRONG tag.

    HTML Code:
    <h6>
       Contact Us about Course Details:
    </h6>
    Probably should have been a H3 not H6, as the prior heading was H2.

    Looking at the form there are several errors; fieldset and legend elements not defined in Basic 1.0 so as with search.htm the DIV element would be applied. Albeit you can see how Basic 1.0 is lacking in some useful FORM elements.

    HTML Code:
    <form method="post"
            action="mailto:example@@example.com"
            enctype="text\plain">
              <fieldset>
                <legend>Enter your Contact Details</legend><br />
    The email address is malformed with '@@' and the enctype should use a forward slash for its value, i.e. text/plain.

    HTML Code:
    <input name="name" type="text" placeholder="First name"
                alt="Please enter your Fullname so we know how to address our responses." />
    There is no attribute called 'placeholder' for this the INPUT element in Basic 1.0, placeholder is meant for (X)HTML5.

    HTML Code:
    alt="Please enter your e-mail address so we can respond to your feedback." />
    Neither can there be alt attributes on those two INPUT elements however they can be used in XHTML 1.0.

    HTML Code:
    <textarea name="message" rows="1O" cols="64"></textarea><br />
    The Eagle-eyed will have spotted the rows attribute should have numeric values not; numeric "1" followed by the letter "O" a common mistake that web authors make the value should have been ten, i.e. 10.

    HTML Code:
    [<a href="home page.htm" alt="
    There is no attribute alt for the A element, I would suspect Stanley meant to use the title attribute. Furthermore that is a malformed URI reference as it has blank space for the filename.


    Alas that concludes the basic feedback and reasons for some faults.

    Additional Judge Comments

    Gather around close people, I've told my story and gave my positive reasons and summary regarding those two code samples. So now it's only fair I make a few brief comments along with those basic errors or points of interest. Obviously there were other discussions or faults that could be found... I'll address some random "leftovers" here regarding the competitor's comments (others we either covered above, or during when the competition was running).

    Poes: as was noted a newbie would unlikely use 'XML stylesheet linking' or the XML Declaration, I'd agree. The OP didn't have "Gordon Gecko brickphone" either. LOL. Like noted Basic 1.1 is newer. Apart from a few new attributes, e.g. inputmode and the 'Forms Module' improvements; Basic 1.1 is a backwards step regarding purity. The LINK style sheets were for legacy browsers.

    Dave:
    yes, an XML Declaration could trigger 'quirks'. As noted the CSS would be in one block if it were Strict. The current headings aren't appropriate really (missing H1). That's because I stripped it down from another file, I agree about there being the need for heading level constancy.

    The TABLE is mangled and there was a little over use of consecutive BR elements and CSS could be appropriate for layout.

    Ron: quite true the TABLE was mangled and you realised what structure it should have had regarding data cells.

    Pullo (aka Dave): correct, no character encoding was declared in the HEAD typically the XML Declaration encoding should suffice (XHTML) though you may add one via META too for legacy user agents.

    Paul: good point about the browser bugs and CSS 3 regarding the erroneous word grey. Plus you gave good explanation regarding the faults with the commenting out of the CSS and its effects. As mentioned earlier I cannot really fault your CSS browser bug explanations.

    I believe between all five; you nailed nearly all the errors or as many as possible going from: Post #1 alone. Without being able to communicate with; Stanley Tweedle dumb himself.

    If this competition had been more complex; I'd have spent time and given you all in-depth individual personal feedback via PM. However, for the benefit of all SPF members I chose this method. Good work guys, I hope you learnt something from the experience and had fun; pulling out your hair, straining your eyes and exercising your brains, etc.

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Nice write up Robert and a well thought out and in-depth "puzzle" indeed

    Thanks for taking the time to put it altogether and teaching us something in the process.

    Congratulations and well done to Poes also for spotting the most errors.

  25. #25
    Galactic Overlord gold trophysilver trophybronze trophy
    HAWK's Avatar
    Join Date
    Aug 2003
    Location
    New Zealand
    Posts
    12,586
    Mentioned
    980 Post(s)
    Tagged
    14 Thread(s)
    Agreed - awesome work Robert. Thanks for your time and effort.


Bookmarks

Posting Permissions

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