922367 - Missing and incomplete tags in css tutorials on MDN site

Status: RESOLVED FIXED

(Developer Documentation Graveyard :: General, defect)

Description

[Dream_of_Better_Days]

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:24.0) Gecko/20100101 Firefox/24.0 (Beta/Release)
Build ID: 20130910160258

Steps to reproduce:

Using the CSS web developer guild tutorial. In the Getting Started section the Action and Challenge sections are missing key parts due to unclosed <p tags in the source code. Starts on the Why use CSS? Creating a Stylesheet and continues on the next couple of pages. 


Actual results:

I'm only up to page 5 in the tutorial and it's getting annoying to have to look at the page source to figure out what I am supposed to do so I can learn css. This is a bad tutorial.


Expected results:

HTML and CSS needs debugging.

Comment 1

[Florian Scholz (Open Web Docs)]

I cannot see any issues with unclosed <p> tags in the tutorial anymore. It might be because our macros have been rebuild yesterday and so this has been fixed. Do you still see the issue?

Comment 2

[Dream_of_Better_Days]

Here is the first page with the issue I reported. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS
If you will notice the sections "Action: Creating A Style Sheet" and "Linking your document to your style sheet" there is obviously missing information on how to actually do this. And today, while I see the code has been changed, the tag is still not closed.

Here is the open tag I pulled from the source code:

<h2 id="Action.3A_Creating_a_stylesheet">Action: Creating a stylesheet</h2>
<ol>
  <li>Create another text file in the same directory as before. This file will be your stylesheet. Name it: <code>style1.css</code></li>
  <li>In your CSS file, copy and paste this one line, then save the file:
    <pre class="brush: css">strong {color: red;}
</pre>
  </li>
</ol>

The <h2 tag is open so the information that should appear in between the two headings is not being displayed on the webpage. This problem continues in the same area on this page: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance

<h2 id="Action.3A_Using_inheritance">Action: Using inheritance</h2>
<ol>
  <li>Edit your sample CSS file.</li>
  <li>Add this line by copying and pasting it. It does not really matter whether you add it above or below the line that is already there. However, adding it at the top is more logical because in your document the <a href="/en-US/docs/Web/HTML/Element/p" title="The HTML &lt;p> element (or HTML Paragraph Element) represents a paragraph of text."><code>&lt;p&gt;</code></a> element is the parent of the <a href="/en-US/docs/Web/HTML/Element/strong" title="The HTML Strong Element (&lt;strong>) gives text strong importance, and is typically displayed in bold."><code>&lt;strong&gt;</code></a> element:
    <pre class="brush:css">p {color: blue; text-decoration: underline;}
</pre>
  </li>
  <li>Now refresh your browser to see the effect on your sample document. The underlining affects all the text in the paragraph, including the initial letters. The <a href="/en-US/docs/Web/HTML/Element/strong" title="The HTML Strong Element (&lt;strong>) gives text strong importance, and is typically displayed in bold."><code>&lt;strong&gt;</code></a> elements have inherited the underlined style from their parent <a href="/en-US/docs/Web/HTML/Element/p" title="The HTML &lt;p> element (or HTML Paragraph Element) represents a paragraph of text."><code>&lt;p&gt;</code></a> element.<br>

This continues for many pages: 
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Color
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content

And this is just in the Getting Started section. This issue makes what could have been an excellent tutorial useless. I would highly suggest having someone proofread the entire tutorial for further issues.

Comment 3

[Florian Scholz (Open Web Docs)]

Thanks a lot for pointing that out in detail! 
I was looking at this with our new redesign enabled, but the issue is present in the normal design.

I fixed the problem in our CSS styles (general sibling selector vs. adjacent selector):
https://developer.mozilla.org/en-US/docs/Template:CustomCSS$compare?to=478429&from=477639

HTH