<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>

CC BY-SA 3.0
2014-10-02T07:06:22.930Z
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.
user2986
CC BY-SA 3.0
2014-10-02T17:43:37.453Z
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.
Lindsey D
CC BY-SA 3.0
2014-10-03T10:39:52.677Z
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.
user2986
CC BY-SA 3.0
2014-09-29T09:16:35.120Z
2014-09-29T09:16:35.120Z
Lindsey D
<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>

CC BY-SA 3.0
2014-10-13T18:56:58.137Z
2014-10-13T18:56:58.137Z
2017-04-13T12:50:59.930Z
Brad Bell
<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>

CC BY-SA 3.0
2014-09-29T19:19:00.570Z
Let's help you find an answer. Do you see the same quotes on Chrome or Firefox developer tools?
Brian Bravo
CC BY-SA 3.0
2014-09-30T12:20:20.760Z
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)
user2986
<templating><tags>
Craft renders unwanted quotation marks on some tags
# 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.
            
            
                {% for image in category.CategorieImage %}
                
                {% endfor %}
                
                    {{ category.title }}
                    {{ category.categorieDescription[:80] ~ '...' }}
                
                
                    {{ entriesNbr }}Mythes
                
            
        

This is what's rendered on the final page in Safari using the developers panel:

            
                                    
                "  "
                
                    Sales
                    Over succes in sales zijn vele mythes. Velen zijn inmiddels zo geworteld dat ze ...
                
                
                    5Mythes
                
            
        

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 Lindsey, 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.
{% spaceless %}
    
        
    
{% 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.

[Lindsey'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.


---

