Forum

Thread tagged as: Problem

Categories outside the paragraph

I'm trying to create the following:

A paragraph with a time element and a listing of categories.

I have the following template set:

  <p class="meta">                                                       
    <time class="dt-published" datetime="<perch:blog id="postDateTime" type="date" label="Date" time="true" format="Y-m-d H:i:s" divider-before="Publishing" />">
        <perch:blog id="postDateTime" type="date" time="true" format="%d %B %Y" />
    </time>                                                                         

    <perch:categories id="categories" set="blog" label="Categories">                
      <perch:before>                                                                
        <ul class="post__cat">                                                      
      </perch:before>                                                               

          <li class="post__cat__item">                                              
            <a href="/blog/archives/<perch:category id="catSlug" type="slug" />" class="p-category post__link"><perch:category id="catTitle" type="text" /></a>
          </li>                                                                     

      <perch:after>                                                                 
        </ul>                                                                       
      </perch:after>                                                                
    </perch:categories>                                                             

  </p>

Perch has generated as followed:

<p class="meta">
    <time class="dt-published" datetime="2015-11-09 21:48:00">
        09 November 2015
    </time>


        </p>
<ul class="post__cat">

          <li class="post__cat__item">
            <a href="/blog/archives/links" class="p-category post__link">Links</a>
          </li>



          <li class="post__cat__item">
            <a href="/blog/archives/review" class="p-category post__link">Review</a>
          </li>

        </ul>
<p></p>

Am I doing it wrong?
Robin Gruyters

Robin Gruyters 0 points

  • 5 years ago
Simon Clay

Simon Clay 127 points

5 years ago

Hi, I think Perch is outputting:

<p class="meta">
  <time class="dt-published" datetime="2015-11-09 21:48:00">
        09 November 2015
  </time>
    <ul class="post__cat">
    <li class="post__cat__item">
        <a href="/blog/archives/links" class="p-category post__link">Links</a>
    </li>

    <li class="post__cat__item">
      <a href="/blog/archives/review" class="p-category post__link">Review</a>
    </li>
    </ul>
</p>

'View Page Source' should confirm that.

But a browser will try to validate the code by closing the <p> before opening the <ul>. Showing this if you 'Inspect element' (not View Source)...

<p class="meta">
    <time class="dt-published" datetime="2015-11-09 21:48:00">
        09 November 2015
    </time>
        </p> <!--The browser inserted this because a ul shouldn't live inside a p-->
<ul class="post__cat">
          <li class="post__cat__item">
            <a href="/blog/archives/links" class="p-category post__link">Links</a>
          </li>
          <li class="post__cat__item">
            <a href="/blog/archives/review" class="p-category post__link">Review</a>
          </li>
        </ul>
<p><!--The browser added the opening p here to validate the final closing p--></p>

I think that's the case.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

I agree with Simon.
Robin Gruyters

Robin Gruyters 0 points

5 years ago

Doh! OK, never mind.