Question

: IE
: Firefox

I’m trying to create an arrow that might change size horizontally. It’s supposed to use 3 images representing the following: < — >

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.
< ____ >: IE (wrong)
< —– >: Firefox (right)

I have the following:

.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;
}

<table>
<tr>
<td> something </td>
<td>
    <DIV  class="bodyArrow">
    <DIV  class="ArrowLeft">
    <DIV  class="ArrowRight">
    </DIV></DIV></DIV>

</td>
<td> something </td>
</tr> 
</table>

Any suggestions on how to make it would?

Thank you very much!

Answer 1

you can use background-size property to stretch the background image

background-size:width height;

and for positioning background image you can use Background-position property