title: create arrow with css and background image
body: <p><img src="https://i.stack.imgur.com/p3vbm.png" alt="ie image">: IE <br>
  <img src="https://i.stack.imgur.com/emvIN.png" alt="firefox image">: Firefox</p>
  
  <p>I'm trying to create an arrow that might change size horizontally. It's supposed to use 3 images representing the following: &lt; --- ></p>
  
  <p>I'm trying to do that with divs and css, but it's not working in IE. The body image is not centered, and it looks like it's an underscore. But that does not happen in firefox or chrome, where the body is centered, and align to the tip of the left and right images.
  &lt; ____ >: IE (wrong)
  &lt; ----- >: Firefox (right)</p>
  
  <p>I have the following:</p>
  
  <pre><code>.bodyArrow {
      width: 38px;
      background: url("../../images/ArrowBody.png") repeat-x center;
      height: 5px;
  }
  .arrowLeft {
  
      height: 5px;
      padding-left: 38px;
      background: url("../../images/ArrowLeft.png") no-repeat 0 0;
  }
  .arrowRight {
      height: 5px;
      font-style: normal;
      padding-right: 3px;
      background: url("../../images/ArrowRight.png") no-repeat 100% 0;
  }
  
  &lt;table&gt;
  &lt;tr&gt;
  &lt;td&gt; something &lt;/td&gt;
  &lt;td&gt;
      &lt;DIV  class="bodyArrow"&gt;
      &lt;DIV  class="ArrowLeft"&gt;
      &lt;DIV  class="ArrowRight"&gt;
      &lt;/DIV&gt;&lt;/DIV&gt;&lt;/DIV&gt;
  
  &lt;/td&gt;
  &lt;td&gt; something &lt;/td&gt;
  &lt;/tr&gt; 
  &lt;/table&gt;
  </code></pre>
  
  <p>Any suggestions on how to make it would?</p>
  
  <p>Thank you very much!</p>