mdn / yari

The platform code behind MDN Web Docs
Mozilla Public License 2.0
1.17k stars 492 forks source link

Footer box is merged with the Specifications table #10886

Open dipikabh opened 3 months ago

dipikabh commented 3 months ago

Summary

There is no space between the Specifications table and the "Help improve MDN" footer box.

Bottom padding seems to be missing in the <article> when <h2 id="specifications"><a href="#specifications">Specifications</a></h2> is at the end of <article>. As a result, there is no gap between the "Specifications" table and the footer box.

On an unrelated note, the "specifications" <h2> and the following <table> are not inside a <section> on any page.

URL

Reproduction steps

Navigate to any page where "Specifications" is the last section on the page

Expected behavior

Space between the "Specifications" or the last section and the footer box like in https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#see_also

Actual behavior

No space between "Specifications" section and the footer box

Device

Desktop

Browser

Firefox

Browser version

Stable

Operating system

Mac OS

Screenshot

specifications and footer box

Anything else?

No response

Validations

mirunacurtean commented 2 months ago

@dipikabh @LeoMcA There are other examples of articles where there could be more padding between the main content and the footer.

  1. Article pages where the footer follow directly after the content with little padding. https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML#assessments

image

  1. Article where thee Next/ Previous buttons are right above the footer. https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#summary https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#see_also https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content#example

image

  1. Articles where the See also area ends with a paragraph https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding#see_also https://developer.mozilla.org/en-US/docs/Learn/MathML#see_also

image