title: Hiding or removing empty text nodes (&nbsp;) in Internet Explorer that render as "ì"
body: <p>I have created a site for a customer with Joomla CMS on the backend. I have an issue when the end user edits some articles it will insert a space before an image tag and then IE interprets that as an empty text node. This is not a problem in any browser other than IE.</p>
  
  <p>IE displays these empty text nodes as small "i" type characters but with an accent.</p>
  
  <p><img src="https://i.stack.imgur.com/QYGfO.png" alt="enter image description here"></p>
  
  <p>I have validated the markup and apart from the odd missing alt tag due to end user edited content, the markup is fine.</p>
  
  <p>I don't think it will be an easy task to try to find and change the backend WYSIWYG editor function so I want to try to make IE ignore these leading spaces. Is there any way to do this in Javascript?</p>
  
  <p>EDIT
  For clarification... here is some of the markup after the end user inserts some images:</p>
  
  <pre><code>&lt;div class="before-after"&gt;
  &lt;p&gt;BEFORE&lt;br /&gt; &lt;img src="/images/before-after/Arm%20before%20treatment.jpg" border="0" width="170" height="205" style="border: 0;" /&gt;&lt;/p&gt;
  &lt;p&gt;AFTER 3 TREATMENTS&lt;br /&gt; &lt;img src="/images/before-after/Arm%20after%203%20treatments.jpg" border="0" width="170" height="205" style="border: 0;" /&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I cannot see any characters apart from a leading space before the img tag. In IE this space is being shown as an ì</p>
  
  <p>The site is here:
  <a href="http://www.radiantliving.co.uk/laser-tattoo-removal" rel="nofollow noreferrer">http://www.radiantliving.co.uk/laser-tattoo-removal</a></p>