0

ie image: IE
firefox image: 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!

BMF
  • 307
  • 1
  • 5
  • 18

3 Answers3

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

Mr_Green
  • 40,727
  • 45
  • 159
  • 271
1

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.

Kev
  • 5,049
  • 5
  • 32
  • 53
  • is there any way to do something similar without doctype? I can't use that (not my choice..) – BMF Oct 29 '12 at 15:02
  • If you can't specify a doctype then I suppose not. I haven't tried it. It's a bit strange that you are not using one, do you need to work in quirks mode? – Kev Oct 29 '12 at 15:14
  • yes, i do. I guess my problem was solved below. But thanks for your help anyway! Very much appreciated. – BMF Oct 29 '12 at 15:28
0

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;
}
Chris Frank
  • 4,124
  • 4
  • 30
  • 42