Thread

Hello there,

I have noticed that when my pages are rendered EE is adding extra and unused markup.

For example:

<ol>
    {exp:channel:entries channel="content_events" sort="asc" limit="5"}
    <li>
      <a href="#" title="{title}">{title}</a>
      <small>{date_of_event}</small>
      {event_summary}
    <li>
    {/exp:channel:entries}
  </ol>

However this renders as follows:

<ol>
    <li>
      <a href="#%22title=%22Event" title="Event 01">Event 01</a>
      <small>1378819200</small>
      
      ​​Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     
     

As you can see there are additional unused tags there now.  How can I stop this and why is it happening?

I’m guessing event_summary is a text area or rich text area.  Output from those fields nearly always get wrapped in p tags, and you can’t wrap a p tag in another p tag (semantically) so the open one:

{event_summary}

is being closed then the event_summary is being added wrapped in it’s own tags and the orphaned closing p tag is fixed up with an opening one as well.  The extra empty p tag is probably from having a carriage return on the end of the text area.

When using text areas and RTEs, my usual practice is to wrap them in a div with the class of p e.g.:

<div class='p'>{event_summary}</div>

and add .p to my p default styling in my css - e.g.:

p, .p {
    font-size: ......
}