create arrow with css and background image

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

Answer 2

You should use :after and :before to avoid unnecessary markup. It works in IE8 but your document must have a doctype.

.arrow {
    position: relative;
    width: 38px;
    background: url("../../images/ArrowBody.png") repeat-x center;
    height: 5px;
}

.arrow:before {
    content: "";
    position: absolute;
    height: 5px;
    width: 5px;
    left: *what you need*;
    background: url("../../images/ArrowLeft.png") no-repeat 0 0;
}

.arrow:after {
    content: "";
    position: absolute;
    height: 5px;
    width: 5px;
    right: *what you need*;
    background: url("../../images/ArrowRight.png") no-repeat 0 0;
}

Then in html you only need:

<div class="arrow"></div>

Ajust values for what you need. More information here: http://www.w3schools.com/cssref/sel_after.asp

This works for IE8 and higher. (and other browsers)

Edit: Forgot maybe the most important for your case: use top property to adjust the alignment of your arrows.

Answer 3

This might work. Your div's are not correct.

<div class="bodyArrow"></div>
<div class="ArrowLeft"></div>
<div class="ArrowRight"></div>

Then you will have to add float:left; to your divs I am guessing.

.bodyArrow {
width: 38px;
background: url("../../images/ArrowBody.png") repeat-x center;
height: 5px;
float:left;
}
.arrowLeft {

height: 5px;
padding-left: 38px;
background: url("../../images/ArrowLeft.png") no-repeat 0 0;
float:left;
}
.arrowRight {
height: 5px;
font-style: normal;
padding-right: 3px;
background: url("../../images/ArrowRight.png") no-repeat 100% 0;
float:left;
}