Answers.Body: <p>I believe the quotation marks are misleading... What you're seeing in the Safari developers panel is simply a blank space, and Safari is putting quotes around it because it's being interpreted as a "string" by the browser.</p>
  
  <p>Equally, your visual layout is probably just getting screwed up because of empty space between your HTML tags. If you tightened up your HTML tags and removed any spacing in between, the layout might look as you expect it to.</p>
  
  <p><a href="http://twig.sensiolabs.org/doc/templates.html#whitespace-control" rel="nofollow">You can easily trim whitespace around Twig tags by using <code>spaceless</code>, or adding dashes.</a></p>
  
  <pre><code>{% spaceless %}
      &lt;a href="#"&gt;
          &lt;img src="path/to/img" /&gt;
      &lt;/a&gt;
  {% endspaceless %}
  </code></pre>
  
  <p>Remove whitespace <strong>before</strong>:</p>
  
  <pre><code>{%- for entry in entries %}
  </code></pre>
  
  <p>Remove whitespace <strong>after</strong>:</p>
  
  <pre><code>{% for entry in entries -%}
  </code></pre>
  
  <p>Remove whitespace <strong>before &amp; after</strong>:</p>
  
  <pre><code>{%- for entry in entries -%}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-02T07:06:22.930Z
Answers.Text: The "whitespace" seems to be generated by this tag: `{% for image in category.CategorieImage %}...{% endfor %}` Adding the suggested spaceless or other trim option don't solve the issue.
Answers.UserDisplayName: user2986
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-02T17:43:37.453Z
Answers.Text: Even if you wrap the whole thing in a `spaceless` tag set, make sure to put dashes on the spaceless tags... `{%- spaceless -%}{%- endspaceless -%}`. That will make sure the trimming stretches all the way to the next HTML tag.
Answers.UserDisplayName: Lindsey D
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-03T10:39:52.677Z
Answers.Text: No matter how or what I try, the issue persists. I can't upload the screenshot but have a look at [this site](http://commercielemyhtes.nl) and notice the dots between the IMG and SPAN tag in the rendered source code in the developers window on both Safari and Chrome.
Answers.UserDisplayName: user2986
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-09-29T09:16:35.120Z
Answers.LastActivityDate: 2014-09-29T09:16:35.120Z
Answers.UserDisplayName: Lindsey D
Answers.Body: <p>Since a ticket was sent into support, I'll add an answer here, too.</p>
  
  <p><a href="https://craftcms.stackexchange.com/a/2804/57">Lindsey's</a> answer is correct, browser inspectors will add quotes around any whitespace in the source.</p>
  
  <p>There was a hidden whitespace character after his closing <code>{% endfor %}</code> that was causing the whitespace to be output.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-13T18:56:58.137Z
Answers.LastActivityDate: 2014-10-13T18:56:58.137Z
Answers.LastEditDate: 2017-04-13T12:50:59.930Z
Answers.UserDisplayName: Brad Bell
Body: <p>Breaking my head over this. </p>
  
  <p>On one of the tags in the HTML template. The <code>{% for image in category.CategorieImage %}</code> loop. Craft seems to generate 2 unwanted quotation marks (<code>"</code>). These characters are messing up the lay-out as the generate an unwanted line/paragraph.</p>
  
  <pre><code>            &lt;div class="portfolio-item img-thumbnail"&gt;
              &lt;a href="{{ category.url }}" class="thumb-info secundary"&gt;
                  {% for image in category.CategorieImage %}
                  &lt;img class="img-responsive" src="{{ image.url ('categorieimage') }}" title="{{ category.title }}" alt="{{ category.title }}"&gt;
                  {% endfor %}
                  &lt;span class="thumb-info-title"&gt;
                      &lt;span class="thumb-info-inner"&gt;{{ category.title }}&lt;/span&gt;
                      &lt;span class="thumb-info-type"&gt;{{ category.categorieDescription[:80] ~ '...' }}&lt;/span&gt;
                  &lt;/span&gt;
                  &lt;span class="thumb-info-action"&gt;
                      &lt;span title="Universal" class="thumb-info-action-icon"&gt;&lt;span class="badge"&gt;{{ entriesNbr }}&lt;/span&gt;&lt;span class="nameMythes"&gt;Mythes&lt;/span&gt;&lt;i class="fa fa-link"&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;/span&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>This is what's rendered on the final page in Safari using the developers panel:</p>
  
  <pre><code>&lt;div class="portfolio-item img-thumbnail"&gt;
              &lt;a href="http://commercielemythes.nl/mythes/sales" class="thumb-info secundary"&gt;
                                      &lt;img class="img-responsive" src="http://commercielemythes.nl/assets/categorie_image/_categorieimage/Sales.jpg" title="Sales" alt="Sales"&gt;
                  "  "
                  &lt;span class="thumb-info-title"&gt;
                      &lt;span class="thumb-info-inner"&gt;Sales&lt;/span&gt;
                      &lt;span class="thumb-info-type"&gt;Over succes in sales zijn vele mythes. Velen zijn inmiddels zo geworteld dat ze ...&lt;/span&gt;
                  &lt;/span&gt;
                  &lt;span class="thumb-info-action"&gt;
                      &lt;span title="Universal" class="thumb-info-action-icon"&gt;&lt;span class="badge"&gt;5&lt;/span&gt;&lt;span class="nameMythes"&gt;Mythes&lt;/span&gt;&lt;i class="fa fa-link"&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;/span&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I've used CODA to show any unwanted (invisible) characters but none seems to be there.</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-09-29T19:19:00.570Z
Comments.Text: Let's help you find an answer. Do you see the same quotes on Chrome or Firefox developer tools?
Comments.UserDisplayName: Brian Bravo
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-09-30T12:20:20.760Z
Comments.Text: This seems to just happen in Safari, Chrome and Opera. Firefox is OK. I've also tried the various suggestions of Lindsey, but none of them seems to work. This site is public so have a look at: [commercielemythes.nl](http://commercielemythes.nl)
Comments.UserDisplayName: user2986
Tags: <templating><tags>
Title: Craft renders unwanted quotation marks on some tags
ThreadText: # Craft renders unwanted quotation marks on some tags
  
  (Asked by: username_0 on 2014-09-29)
  
  Breaking my head over this.
  
  On one of the tags in the HTML template. The `{% for image in category.CategorieImage %}` loop. Craft seems to generate 2 unwanted quotation marks (`"`). These characters are messing up the lay-out as the generate an unwanted line/paragraph.
  
  ```
              <div class="portfolio-item img-thumbnail">
              <a href="{{ category.url }}" class="thumb-info secundary">
                  {% for image in category.CategorieImage %}
                  <img class="img-responsive" src="{{ image.url ('categorieimage') }}" title="{{ category.title }}" alt="{{ category.title }}">
                  {% endfor %}
                  <span class="thumb-info-title">
                      <span class="thumb-info-inner">{{ category.title }}</span>
                      <span class="thumb-info-type">{{ category.categorieDescription[:80] ~ '...' }}</span>
                  </span>
                  <span class="thumb-info-action">
                      <span title="Universal" class="thumb-info-action-icon"><span class="badge">{{ entriesNbr }}</span><span class="nameMythes">Mythes</span><i class="fa fa-link"></i></span>
                  </span>
              </a>
          </div>
  
  ```
  
  This is what's rendered on the final page in Safari using the developers panel:
  
  ```
  <div class="portfolio-item img-thumbnail">
              <a href="http://commercielemythes.nl/mythes/sales" class="thumb-info secundary">
                                      <img class="img-responsive" src="http://commercielemythes.nl/assets/categorie_image/_categorieimage/Sales.jpg" title="Sales" alt="Sales">
                  "  "
                  <span class="thumb-info-title">
                      <span class="thumb-info-inner">Sales</span>
                      <span class="thumb-info-type">Over succes in sales zijn vele mythes. Velen zijn inmiddels zo geworteld dat ze ...</span>
                  </span>
                  <span class="thumb-info-action">
                      <span title="Universal" class="thumb-info-action-icon"><span class="badge">5</span><span class="nameMythes">Mythes</span><i class="fa fa-link"></i></span>
                  </span>
              </a>
          </div>
  
  ```
  
  I've used CODA to show any unwanted (invisible) characters but none seems to be there.
  
  **Tags:** templating, tags
  
  > **Comments:**
  > **username_1**: Let's help you find an answer. Do you see the same quotes on Chrome or Firefox developer tools?  
  > **username_0**: This seems to just happen in Safari, Chrome and Opera. Firefox is OK. I've also tried the various suggestions of username_2, but none of them seems to work. This site is public so have a look at: [commercielemythes.nl](http://commercielemythes.nl)  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_2 on 2014-09-29. Score: 4
  
  I believe the quotation marks are misleading... What you're seeing in the Safari developers panel is simply a blank space, and Safari is putting quotes around it because it's being interpreted as a "string" by the browser.
  
  Equally, your visual layout is probably just getting screwed up because of empty space between your HTML tags. If you tightened up your HTML tags and removed any spacing in between, the layout might look as you expect it to.
  
  [You can easily trim whitespace around Twig tags by using `spaceless`, or adding dashes.](http://twig.sensiolabs.org/doc/templates.html#whitespace-control)
  
  ```
  {% spaceless %}
      <a href="#">
          <img src="path/to/img" />
      </a>
  {% endspaceless %}
  
  ```
  
  Remove whitespace **before**:
  
  ```
  {%- for entry in entries %}
  
  ```
  
  Remove whitespace **after**:
  
  ```
  {% for entry in entries -%}
  
  ```
  
  Remove whitespace **before & after**:
  
  ```
  {%- for entry in entries -%}
  
  ```
  
  > **Comments:**
  > **username_0**: The "whitespace" seems to be generated by this tag: `{% for image in category.CategorieImage %}...{% endfor %}` Adding the suggested spaceless or other trim option don't solve the issue.  
  > **username_2**: Even if you wrap the whole thing in a `spaceless` tag set, make sure to put dashes on the spaceless tags... `{%- spaceless -%}{%- endspaceless -%}`. That will make sure the trimming stretches all the way to the next HTML tag.  
  > **username_0**: No matter how or what I try, the issue persists. I can't upload the screenshot but have a look at [this site](http://commercielemyhtes.nl) and notice the dots between the IMG and SPAN tag in the rendered source code in the developers window on both Safari and Chrome.  
  
  ---
  
  ### Answer by username_3 on 2014-10-13. Score: 0
  
  Since a ticket was sent into support, I'll add an answer here, too.
  
  [username_2's](https://craftcms.stackexchange.com/a/2804/57) answer is correct, browser inspectors will add quotes around any whitespace in the source.
  
  There was a hidden whitespace character after his closing `{% endfor %}` that was causing the whitespace to be output.
  
  
  ---
  
  