title: Putting Images Inside a BUTTON Element (HTML & CSS)
body: <p>I have a simple button (as shown below) on which I need to display two pictures, one on either side of the button text. Im battling to create the CSS that will work in both Firefox and Internet Explorer! (the button images are coming from a JQuery UI skin file)</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>button div{
      width:16px;
      height:16px;
      background-image: url(images/ui-icons_d19405_256x240.png);      
  }
  
  button div.leftImage{
      background-position: -96px -112px;
      float: left;
  }
  
  button div.rightImage{
      background-position: -64px -16px;
      float: right;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;button&gt;&lt;div class="leftImage"&gt;&lt;/div&gt;&lt;span&gt;Button Text&lt;/span&gt;&lt;div class="rightImage"&gt;&lt;/div&gt;&lt;/button&gt;
  </code></pre>
  
  <p><strong>Preview</strong></p>
  
  <p>Firefox</p>
  
  <p><a href="https://i.stack.imgur.com/tqbi9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tqbi9.jpg" alt="alt text"></a>
  </p>
  
  <p>Internet Explorer 8</p>
  
  <p><a href="https://i.stack.imgur.com/0MNZ9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0MNZ9.jpg" alt="alt text"></a>
  </p>