Uploaded image for project: 'phpBB'
  1. phpBB
  2. PHPBB-9479

Empty paragraphs for vertical spacing are rather old-fashioned

XMLWordPrintable

    • Icon: Improvement Improvement
    • Resolution: Fixed
    • Icon: Minor Minor
    • 3.1.0-b1
    • 3.0.x
    • Other
    • None

      This is strictly a cosmetic issue with the XHTML, and not user-visible.

      In the world of reliably functional CSS, using empty paragraphs for vertical spacing is rather old-fashioned and obsolete. I suggest that the following be replaced with appropriate CSS margins:

      Edit: I've now got what I think is a better version of this - see next post.
      I'm leaving this version in so you can see the alternates.

      styles/prosilver/template/jumpbox.html:

      <!-- IF S_VIEWTOPIC -->
              <p></p><p><a href="{U_VIEW_FORUM}" class="left-box {S_CONTENT_FLOW_BEGIN}" accesskey="r">{L_RETURN_TO} {FORUM_NAME}</a></p>
      <!-- ELSEIF S_VIEWFORUM -->
              <p></p><p><a href="{U_INDEX}" class="left-box {S_CONTENT_FLOW_BEGIN}" accesskey="r">{L_RETURN_TO} {L_INDEX}</a></p>
      <!-- ELSEIF SEARCH_TOPIC -->
              <p></p><p><a class="left-box {S_CONTENT_FLOW_BEGIN}" href="{U_SEARCH_TOPIC}" accesskey="r">{L_RETURN_TO}: {SEARCH_TOPIC}</a></p>
      <!-- ELSEIF S_SEARCH_ACTION -->
              <p></p><p><a class="left-box {S_CONTENT_FLOW_BEGIN}" href="{U_SEARCH}" title="{L_SEARCH_ADV}" accesskey="r">{L_RETURN_TO_SEARCH_ADV}</a></p>
      <!-- ENDIF -->

      Replace with:

      <!-- IF S_VIEWTOPIC -->
              <div class="jumpbox-return-to"><a href="{U_VIEW_FORUM}" class="left-box {S_CONTENT_FLOW_BEGIN}" accesskey="r">{L_RETURN_TO} {FORUM_NAME}</a></div>
      <!-- ELSEIF S_VIEWFORUM -->
              <div class="jumpbox-return-to"><a href="{U_INDEX}" class="left-box {S_CONTENT_FLOW_BEGIN}" accesskey="r">{L_RETURN_TO} {L_INDEX}</a></div>
      <!-- ELSEIF SEARCH_TOPIC -->
              <div class="jumpbox-return-to"><a class="left-box {S_CONTENT_FLOW_BEGIN}" href="{U_SEARCH_TOPIC}" accesskey="r">{L_RETURN_TO}: {SEARCH_TOPIC}</a></div>
      <!-- ELSEIF S_SEARCH_ACTION -->
              <div class="jumpbox-return-to"><a class="left-box {S_CONTENT_FLOW_BEGIN}" href="{U_SEARCH}" title="{L_SEARCH_ADV}" accesskey="r">{L_RETURN_TO_SEARCH_ADV}</a></div>
      <!-- ENDIF -->

      It's largely a matter of personal taste, but I also prefer using <div> for non-paragraph markup blocks. By all means stay with <p> (just strip the leading <p></p> from each line), if I've missed some subtlety there.

      Add to styles/prosilver/theme/common.css:

      .jumpbox-return-to {
      	margin-top: 2em;
      }

      A quick grep through prosilver/template/*.html didn't throw up any other instances of <p> being used in this manner, but my search was not exhaustive.

      The similar "<br /><br />" near the bottom of jumpbox.html can also be removed and replaced with CSS:

      <!-- ELSE -->
      	<br /><br />

      Find in styles/prosilver/theme/common.css:

      #page-footer {
              clear: both;
      }

      Change to:

      #page-footer {
              clear: both;
              padding-top: 5px;
      }

      Find in styles/prosilver/theme/forms.css:

      fieldset.jumpbox {
              text-align: right;
              margin-top: 15px;
              height: 2.5em;
      }

      Change to:

      fieldset.jumpbox {
              text-align: right;
              margin-top: 15px;
      }

            nickvergessen Joas Schilling
            paul.j.murphy paul.j.murphy
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Created:
              Updated:
              Resolved: