"Spot the Error" Competition

Community
1

Spot the Error!
[rule=“100%”]Orange[/rule]

Hey folks, we have a fun, quick challenge for you.

The quoted text below (a mock forum question) has some errors in it. All you have to do is spot as many errors as you can and list them in your reply. They may include such things as grammatical mistakes and/or errors or potential problems in the code.

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.)

The prize is a free SitePoint ebook.

The competition will only be open for about 24 hours, so you need to be quick.

Note

By “error” I’m not talking about preferences or stylistic choices. For example, “coler” is a misspelling, while “color” and “colour” are accepted alternatives. Likewise, while it may not be ideal to wrap an <h1> in a <div>, it’s not strictly an error. (I’ve tried not to make too many rules, so just have fun with this, and let’s see what happens!)

Tip

There are arguably at least 11 errors here. :slight_smile:

I have a problem with the top div, Its supposed to be red, but its bacground color is not showing up. What am I missing.

html
Code:

<div class="top">
    <h1>My Site</hl>
</div>

css

#top {background: #0000ff;}
h1 {float: left;}
Edit:

OK guys, this competition is now over, though you are welcome to discuss the issues further. The winner is announced in post #27, with some comments on the various issues as well.

2

what a fantastic idea for a thread!!!

okay, i’ll get the ball rolling…

the first error is that there is no SQL involved in the problem

ha ha, j/k :smiley:

here’s the first error…

the div has a class called “top” but the css specifies a style for an id selector called “#top”

in other words, that css will not apply to the div

3

So we already know that the CSS needs to be a ‘.’ instead of ‘#’. The difference between a ‘class’ and a ‘id’.

The reason the color doesn’t show is that the ‘property’ should be ‘background-color’.
The ‘hex code’ in your example is ‘blue’. The ‘hex code’ for ‘red’ is #ff0000.

I also see that your closing tag for the ‘h1’ is using a lowercase ‘L’ instead of a ‘1’.
It should be <h1>My Site</h1>.

4

Error 1 -
CSS has a declaration for an ID selector (#top) - but the div is set to a class of top - so the CSS will not apply to the div
Error 2 -
The hex code for the color declared in the CSS is blue - therefore the background color will not show up as red (even when coded correctly)
Error 3 -
Its … should be it’s - Improper spelling of a contraction/usage of an apostrophe - it’s is the contraction for “it is” - which is the proper usage in this sentence
Error 4 -
bacground… spelled incorrectly - the proper spelling of background is “Background” :slight_smile:
Error 5 -
What am I missing. > Should be … What am I missing? Improper usage of a period. All questions should end with a question mark.
Error 6 -
Its - as used in this sentence it uses improper capitalization. Coming after a comma, it should be a lower case “i”.
Error 7 -
Improper usage of comma’s in the sentence. The commas should wrap a part of a sentence that can be removed without changing the essential meaning of that sentence.
Error 8 -
H1 closing tag uses a small L instead of a 1 - this will cause the code to break
Error 9 -
This one may be arguable - but the first statement… I have a problem with the top div… should be … I have a problem with the div with the class of “top”.
Error 10 -
CSS declaration for background to set the color should be “background-color”

5

Hmmm - I managed 9:
1 - Sentence run on. First sentence should end at “top div”.
2 - Its should be it is or it’s
3 - get rid of the comma after red
4 - second its is possessive and should have an apostrophe
5 - background spelled wrong
6 - Last sentence is a question - should end with a question mark
7 - CSS code - #top should be .top or the html code should be changed to id
8 - CSS code - the hex code for red is #ff0000.
9 - CSS code - the selector is background-color

Two potential issues but not really:
1 - it can be argued that HTML and CSS should be in caps
2 - the theoretical author of the post didn’t leave their name.

Tony

6

Love it!

Okay, here’s what I can see.

I have a problem with the top div, Its supposed to be red, but its bacground color is not showing up. What am I missing.

This should be to me:

I have a problem with the div classed “top”. It’s supposed to be red, but its background color is not showing up. What am I missing?

Problems are:

  • Specifying the div properly (in the event that there were more than one div containers)
  • Full stop after specifying the problem. (1 message, 1 sentence)
  • Its should be It’s (It is)
  • background spelt wrong.
  • Last sentence is a question.

Other problems:

  • #top should be .top as this is a class
  • The h1 tag is not closed properly. It should be </h1> not </hl>
  • Background colour should be red (#ff0000) not blue (#0000ff).
  • Float should be placed in the top class as floating the h1 tag collapses the div. => .top {background: #ff0000; float: left;}

That’s all I got!

7

Besides the mentioned earlier I swing it this way:

The html structure is incomplete ie:
<html>
<title></title>
<body>
<div class=“top”>
<h1>My Site</h1>
</div>
</body>
</html>

For some people, depending on how sophisticated the website is, the CSS should be structure like so to represent the HTML document

.top {background: #0000ff;}
.top h1 {float: left;}

That way the h1 that is being used within that div, represents it properly.

that case it would be like this with the proper use of background-color property.

.top {background-color: #0000ff;}
.top h1 {float: left;}

If there is 11 I like to know where lol.

8

  1. The div has a class of “top” but the CSS is defining an id of “top”. Based on the CSS defining an id of “top” and there is no id defined in the HTML, no styling will take place.

  2. The div is supposed to be styled with a background color of red, but the only contents of the div is a floating h1. Because of the defined float of the h1, the height of the containing div essentially collapses on itself. To rectify, you’d need to clear the floating h1 or insert something else that is not floating within the div.

  3. The intent of the problem was to make the “top” div have a background color of red, but the CSS defines a background of blue (#0000ff). Red is #ff0000.

9

1,2) I have a problem with the top div, Its (this should be “it’s”, a contraction of “it is,” and with lower case given that it continues a sentence)
3) I have a problem with the top div, it’s supposed … (that comma should be a colon -> :slight_smile:
4) but its bacground (this should be “background” or, better, background-color) color is not showing up.
5) What am I missing. (that should end with a question mark: ?, given that it is a question)
6) <h1>My Site</hl> (the closing tag should be h1 rather than hl (l as in loud)
7) [LEFT]#top {background: #0000ff;} the correct selector [/LEFT]is .top, given that the div has a top class assigned to it rather than an id “top”
8) #[LEFT][COLOR=#464646]top {background: #0000ff;} the color should be #ff0000 or “red,” right now is a blue.
9) html Code: Code: Repeated “Code:”

[/COLOR][/LEFT]

10

Well the journalist in me wants to critique the description of the problem:

  1. It is a compound sentence. “I have a problem with the top div.” Period.
  2. “it’s” not “its”
  3. “background” is spelled wrong
  4. “What am I missing.” is a question

With the code,
6) #0000ff is blue, the coder wants red, which would be #ff0000
7) Because the h1 is floated, the div has no depth and thus won’t display a background color.
8) Also, why are we floating the h1 at all?
9) Looks like the closing h1 is a lower case “L”

And of course, the previously mentioned; “top” should be a class in the CSS.

11

I have a problem with the top div, Its supposed to be red, but its bacground color is not showing up. What am I missing.

html

<div class=“top”>
<h1>My Site</hl>
</div>
css

#top {background: #0000ff;}
h1 {float: left;}

Including misspellings, here’s what I’ve found:

  1. It should be “it’s supposed to be red”
  2. Also, it should be “it’s” with a lowercase i, since it’s located after a comma.
  3. It should say “I have a problem with the top div:” since the explanation of the problem comes after that phrase
  4. “Background” instead of “bacground”
  5. There should be a question mark at the end of the first paragraph.
  6. The <h1> tag is closed using </hl>
  7. The div has a class of “top”, but the CSS says “#top”, which is why the background color isn’t being applied. # is for IDs while . is for Classes.
  8. The background color is supposed to be red, but #0000ff is blue
  9. If the <h1> is being floated, div.top should have an overflow: hidden, or the float: left could be added to div.top instead of the <h1>
  10. Instead of saying “the top div”, it should say something like “div.top”, so that there’s no potential confusion with other divs in case there were others.
  11. The word “Code” is repeated after HTML
  12. HTML and CSS should be in uppercase
12
  1. The first comma (“div,”) should be a colon (“div;”).
    2.“Its” should not be capitalized.
  2. “Its” should be “it is” (or "it’s).
  3. “bacground” should be “background”.
  4. "missing should be punctuated with a question mark (?), not a period (.).
  5. css code #top shouldn’t have a hash.
  6. css code {background: … } should be {background-color: …}.
  7. css code #0000ff is a dark blue, not red.
  8. css code h1 {float: left;} won’t work - you can’t float the h1 tag - you need to float an object, like a div or an image (complete wag on my part - I’m not a coder!).
13

  1. Typos in question
    “Its” should be “It’s”. “Its” is the possessive form, used when the object belongs to the subject in some way.
    “bacground” should be “background”. No explanation necessary there, presumably. Unless an etymology is required? :wink:

  2. Grammatical error in question
    “… with the top div, Its …” uses a comma in place of a full stop. Should be “… with the top div. It’s supposed …”
    “What am I missing.” should be “What am I missing?”. Needs a question mark to make it a question, rather than a statement.

  3. Grammatical mistakes in titles of code samples
    HTML and CSS should be capitalized, because they are acronyms of HyperText Markup Language and Cascading Style Sheets respectively.

  4. Extraneous text
    Below HTML, “Code:” is extraneous. It is automatically included with a code block.

  5. H1 closing tag is actually HL (using upper case here to allow readers to avoid the ambiguity I’m talking about)
    The font here hides, at first glance, the fact that the close tag for the H1 actually says HL - which is not a tag. The H1 in opening tag and the CSS code do say H1, not HL. It looks like a 1 pixel difference.

  6. Mismatch. Wrong HTML attribute or wrong selector.
    The HTML code specified as a div with a class “top” whilst the CSS specifies an identifier/id by that name. Of course, this will mean the desired background colour attributes won’t be applied to the div as hoped. The solution here is to decide whether a class or id is in order. If it class, then the CSS selector should be changed to “.top”. If it’s an id that’s needed, then the HTML attribute “class” should be changed for “id”. It’s not possible to make that judgement with the information given.

  7. “background” declaration is incomplete, or used erroneously.
    The expected structure of the “background” property is:

background: [color] [image] [repeat] [attachment] [position];

From the information given, it looks as if the user was actually looking for the “background-color” property. The correct code would be:

background-color: #0000FF;

#0000FF corresponds to pure blue, which is named “blue” in the CSS named colours table, so correct code could also be:


background-color: blue;
/* Alternatively using the rgb notation */
background-color: rgb(0, 0, 255);
  1. Wrong hex code
    The user wants wants a red background. The hex code they use (as I mentioned) corresponds to blue. The correct values code would be “#FF0000”, “red” and “rgb(255, 0, 0)”.

8 out of a disputable 11. I’m happy with that. I couldn’t see any more that seemed like they fit within the rules, but I suppose a couple of the ones I pointed out (like spelling errors) might be considered independent by others? I don’t know.

14

1- you have to use . for class selector not # id selector
2- your hex color is blue not red the red color hex is #FF0000

15
  1. There should not be a comma after the word “div” in the first sentence as it is a complete statement. A period or semi-colon would be more appropriate.
  2. The first occurrence of the word “Its” should have an apostrophe in it as the word is a contraction of the words “It is”.
  3. There is a letter “k” missing in the misspelled word “bacground”.
  4. The last sentence in the first paragraph poses a question, thus it should end in a question mark.
  5. As it is an acronym, the letters “html” should all be capitalized.
  6. The first occurrence of the word “Code”, along with its accompanying colon, should be on the same line as the acronym “HTML” since both words together describe the code that follows it.
  7. The word “Code” referenced in the previous list item should not be capitalized as it is not part of a (sub-)heading. If it was a heading, there would not be a colon on the same line.
  8. The second occurrence of the word “Code”, along with its accompanying colon, should be deleted as it is a duplication of the line above it (albeit indented).
  9. The class in the HTML’s div should be an id; or, the id reference in the CSS should be a class.
  10. As it is an acronym, the letters “css” should all be capitalized.
  11. The third occurrence of the word “Code”, along with its accompanying colon, should be on the same line as the acronym “CSS” since both words together describe the code that follows it.
  12. The word “Code” referenced in the previous list item should not be capitalized as it is not part of a (sub-)heading. If it was a heading, there would not be a colon on the same line.
  13. The HEX code used in #top would produce a color of blue, not red. If red is the desired result, a HEX code of #ff0000, for example, should be used.
  14. Unless there is some preceding CSS code not listed that would define otherwise, the h1 tag has a default width of 100% and a default alignment of left, thus floating it, be it left or right, would serve no purpose.
16

Error

  1. In code “top” is a class. But in Css it is defined with # which is not correct. # is used to define properties of a object defined with id , for class it should be started with a dot. “.”

  2. The property of top,Once it is defined as a Class in css with “.”, next thing we need to correct is , we must define all properties , when use only background, If just color need to be set then background-color should be use.

17

Here is my answer

  1. First sentence should have a period after div.
  2. Its is supposed to be It’s
  3. The comma after red doesn’t need to be there
  4. bacground should be background
  5. "What am I missing should have a ? at the end
  6. Closing h1 tag should have the number 1 instead of the letter l
  7. #top should be .top since top is a class and not an id
  8. background should be background-color
  9. #0000ff is blue. It should be #ff0000; to be red
  10. float is used with block level elements. h1 tag is not a block level element.
  11. float should be used in the top class instead of h1. code should read .top {background-color: #ff0000; float: left;}
18

Errors #1 and #2: On the initial phrase, where it reads: “Its supposed to be red” it should read “it’s supposed to be red”. Since it’s part of a sentence the capitalization of the “I” is wrong. Also, it refers to a substantive so it should have the apostrophe indicating it.
Errors #3 and #4: Same as before, the apostrophe is missing from the “its bacground”, where it should read “it’s”. Also, the correct spelling is “background” and not “bacground”.
Error #5: “What am I missing” is a question and therefore it should end with a question mark rather than a dot.
Error #6: HTML is an acronym (it means “Hyper Text Markup Language”), so all letters should be capitalized.
Error #7: The closing tag at the second line of the HTML code should be “</h1>”. It has a typo, so it reads “</hl>” (slash, lowercase letter H and lowercase letter L).
Error #8: As in #6, CSS is an acronym (meaning “Cascading Style Sheets”), so all letters should be capitalized.
Error #9: At the first line of the CSS code, “top” is syntatically indicated as an ID and not a class, so it should begin with a dot (“.top”, instead of “#top”). The opposite would also be true, so if the OP would like to implement “top” as an ID then he would leave the CSS code as is (“#top”) and change the first line of it’s HTML code to read: ‘<div id=“top”>’.
Error #10: At the first line of the CSS code, the correct style name for setting a background color would be “background-color” and not “background”.
Error #11: The hexadecimal value of the style “background-color”, as coded by the OP represents blue and not red. That is recognizable because the hexadecimal notation for colors in HTML and CSS represents the amount of the three primary colors in this specific order: Red, Green and Blue, being the hexadecimal value “FF” the maximum value and “00” the minumum (meaning the absence of the color). So the correct hexadecimal representation for the red color would be “#ff0000”, meaning “maximum amount of red, no green and no blue”.

19

Wow, you guys are good! You’re picking up the sneaky things I stuck in there to catch you out. :smiley: Keep the answers coming! You are also seeing things I didn’t see. :slight_smile:

20

Grammar
“div,” should have a period and not a comma after it because “div” ends the sentence.

“Its” should have an apostrophe because it represents a contraction.

“Its supposed” It is not pre-defined in that sentence and would refer to div tag. What is “It’s” ? The div tag? The words “My Site” ? Misplaced modifier.

“bacground” should be spelled background.

“missing.” should be “missing?” - punctuation asking a question

Code
“0000ff” is blue and red is not specified in the CSS

the css shows #top { background: #0000ff; } when the actual solution should be #top { background-color: #0000ff; } if the browser does not support the former. Person does not state what browser this is in.

red needs to be specified in the H1 or the #top as color: #ff0000;

Doctype needs to be specified in the html

html needs to be opened / closed

language need to be defined

head needs to be opened / closed

title is missing

body needs to be opened / closed

<!DOCTYPE html>
<html lang=“en-US”>
<head>
<title>My Site</title>
</head>
<body><div class=“top”>
<h1>My Site</hl>
</div>
</body>
</html>