title: Why IE doesn't support my CSS positioning
body: <p>I positioned links on one image which has 3 buttons, (something like <a href="http://www.templatetuning.com/blog/wp-content/uploads/2012/05/dare-to-share2.jpg" rel="nofollow">this</a>). </p>
  
  <p>The positioning works with Firefox and Chrom, but with my "favorite" IE(11).. well.. I see the link on the image as an invisible very small character. If I was a user, I wouldn't notice it and think the link isn't working. </p>
  
  <p>I can't publish my real code, but I will change the names in it. </p>
  
  <p>HTML (there is a "lps" class div before this code): </p>
  
  <pre><code>&lt;img src="http://example.ag/nts/images/category/subcat/btns.jpg" style="margin-top: 25px;
  margin-bottom: 35px;"&gt;
  
  &lt;div class="promotioncontent"&gt;
      &lt;a class="how modal_link" href="#"&gt;&amp;nbsp;&lt;/a&gt;
  
      &lt;div class="term" style="display: none;"&gt;
          &lt;div class="termcontent"&gt;
              &lt;div class="termheader"&gt;&lt;h3&gt;WORK&lt;/h3&gt;&lt;a href="#" class="a_close"&gt;&lt;/a&gt;
              &lt;/div&gt;
  
                  &lt;div class="termtext"&gt;
                      &lt;img src="http://example.ag/nts/images/category/subcat/work.jpg"&gt;
                      &lt;a class="openprize opennext" href="#"&gt;&lt;/a&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
          &lt;a class="prize modal_link" href="#"&gt;&amp;nbsp;&lt;/a&gt;
          &lt;div class="term" style="display: none;"&gt;
              &lt;div class="termcontent"&gt;
                  &lt;div class="termheader"&gt;&lt;h3&gt; TABLES&lt;/h3&gt;&lt;a href="#" class="a_close"&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="termtext"&gt;
                      &lt;img src="http://example.ag/nts/images/category/subcat/tables.jpg"&gt;
                      &lt;a class="openfaq opennext" href="#"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;a class="faqs modal_link" href="#"&gt;&amp;nbsp;&lt;/a&gt;
          &lt;div class="term" style="display: none;"&gt;
              &lt;div class="termcontent"&gt;
                  &lt;div class="termheader"&gt;&lt;h3&gt;FAQs&lt;/h3&gt;&lt;a href="#" class="a_close"&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="termtext"&gt;
                      &lt;img src="http://example.ag/nts/images/category/subcat/FAQ.jpg"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Only the relevant CSS: </p>
  
  <pre><code>.lps a.how {
      right: 50%;
      margin-right: 189px;
  }
  
  .lps a.modal_link {
      position: absolute;
      bottom: 70px;
      display: block;
      width: 233px;
      height: 76px;
      text-decoration: none;
  }
  </code></pre>
  
  <p>What can be the cause of the problem and how can I fix it without ruining it on the Firefox and Chrome browsers?  </p>