Screen show does not match final result of following tutorial.

[jessewwarner]

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form

What specific section or headline is this issue about?

Active learning: building a form structure

What information was incorrect, unhelpful, or incomplete?

The screenshot showing what the result of building the form described in steps 1-8 should look like does not match the final result. The final result does match the form shown on the page that loads when the "running live" link is clicked. However, the final result appears to be a poorly designed form with the labels and asterisk in incorrect positions. The problem appears to be the following CSS code that was provided:

label span {
    display: inline-block;
    width: 120px;
    text-align: right;
}

This bit of CSS is making both the labels and asterisks 120 pixels wide and aligned right, causing them to be in awkward positions. Changing this CSS code to the following looks much better:

label>span {
    display: inline-block;
    width: 120px;
    text-align: left;
}

At the very least, please fix the screenshot to match what the final form actually looks like with the provided code, so it doesn't look like the results of following the tutorial are wrong. However, changing the CSS so only the spans that are direct children of labels are 120px wide and aligned left makes the form look much better, so consider changing that too and updating the "running live" page.

What did you expect to see?

I expected for my final results to match the screenshot shown. The final results did not match, so I thought I may have made a mistake following the tutorial. However, when I clicked the link to see the live version of the form, it and my results matched. Although, there are still some issues regarding how the CSS is styling the form that should be addressed as well.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/learn/forms/how_to_structure_a_web_form
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/forms/how_to_structure_a_web_form/index.md
• Last commit: 7c36ed6
• Document last modified: 2023-08-21T22:29:20.000Z

[wbamberg]

Thank you for filing!

It looks like what's happening here is that the "screenshot" is actually the result of scooping up all the code fragments in that section and sticking them inside an iframe, using the EmbedLiveSample macro. This code attempts to include CSS:

<link href="payment-form.css" rel="stylesheet" />

...but that doesn't work in the EmbedLiveSample system, and as a result the "screenshot" does not get any styling at all.

Then the page at https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html, as you point out, has broken styling. If you fix the style as you suggest, it looks all right.

So I think the fix is twofold:

• for the CSS at https://github.com/mdn/learning-area/blob/c754e63586d8d897ebee120fe4dcd320e1eefef1/html/forms/html-form-structure/payment-form.css#L23, along the lines you suggest
• make the "screenshot" load the page from https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html, using the EmbedGHLiveSample macro, so it picks up those styles.

[zfox23]

I appreciate the detail in this issue as well as the discussion! :) I'm closing this in favor of the resolution reached in mdn/learning-area#609.