title: CSS sliding door background image problem
body: <p>I noticed I am not the first to ask about CSS sliding doors.  However this seems (at least to me) to be a rather odd problem which I have not seen an answer for.</p>
  
  <p>Trying to create a simple rounded corner link button:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;a href="#"  class="link_button"&gt;&lt;span&gt;Add A New Somthing&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>    .link_button {
          background: transparent url('img/backgrounds/bg-buttonRight.png') no-repeat scroll top right;
          color: #444;
          display: block;
          float: left;
          font: normal 12px arial;
          height: 41px;
          margin-right: 6px;
          padding-right: 14px; 
          text-decoration: none;
      }
  
      .link_button span {
          background: transparent url('img/backgrounds/bg-buttonLeft.png') no-repeat top left;
          display: block;
          line-height: 31px;
          padding: 5px 0 5px 14px;
      }
  
      .link_button:active {
          background-position: bottom right;
          color: #000;
          outline: none; 
      }
  
      .link_button:active span {
          background-position: bottom left;
          padding: 6px 0 4px 18px; 
      }
  </code></pre>
  
  <p>results:</p>
  
  <p><a href="http://www.codefruition.com/sandbox/img/buttonProblems/problemImageOne.jpg" rel="nofollow noreferrer">alt text http://www.codefruition.com/sandbox/img/buttonProblems/problemImageOne.jpg</a></p>
  
  <p>The two images are overlapping, which is what I want, but why the discoloration?  Why would one be darker?  I tried using png jpg, gif, with and without transparency.</p>
  
  <p>I <a href="http://www.codefruition.com/sandbox/buttonTest.html" rel="nofollow noreferrer">posted the code here</a>, along with another attempt using only one jpg instead of two, but still the same results.</p>
  
  <p>Did I miss something?</p>
  
  <p>Thanks in advance.</p>