1

I've used Inkscape to create a very simple icon in a site I'm developing. The icon is absolutely positioned over the border of two side-by-side elements.

In Chrome it looks great:-

Chrome

But in IE7 not so..:-

IE7

Am I doing something wrong? There is no transparency in the coloured part of my image, as far as I can tell.

Here's the code I'm using to display the images:-

<div class="roadmapstep">
    <div class="roadmapnumber">1</div>
    <h4>Header 1</h4>
    <div class="nextarrow"><img src="nextarrow.png"></div>
</div>

<div class="roadmapstep">
    <div class="roadmapnumber">2</div>
    <h4>Header 2</h4>
    <div class="nextarrow"><img src="nextarrow.png"></div>
</div>

CSS for the div containing the image is:-

.nextarrow {
    position: absolute;
    top: 65px;
    margin-right: -35px;
    right: 0;
    width: 65px;
    height: 40px;
}

CSS for the divs with the border: 

.roadmapstep {
    width: 220px;
    height: 150px;
    border-left: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    float: left;
    position: relative;
}
Mat Richardson
  • 3,576
  • 4
  • 31
  • 56
  • try to add CSS `z-index:1000;` to element with border and `z-index:1001;` to arrow; – wzazza Oct 25 '12 at 08:44
  • Please post your HTML and CSS or even better: set up a [fiddle](http://jsfiddle.net) to have your code tested by others. To that looks like something is going wrong in IE with the `z-index`. – feeela Oct 25 '12 at 08:44
  • http://stackoverflow.com/questions/6229184/ie7-z-index-issue-context-menu/6229309#6229309 – thirtydot Oct 25 '12 at 08:56

2 Answers2

3

Use z-index to position an image above another

avb
  • 1,558
  • 1
  • 14
  • 37
  • If you give the z-index property of the arrow a higher value than the border, it should work. I'll have a look at your code – avb Oct 25 '12 at 08:52
  • I've added the css for the divs with borders. I have tried different z-indexes but it doesn't work. Chrome and Firefox operate perfectly, just not IE7.. – Mat Richardson Oct 25 '12 at 08:56
  • It seems your border and the arrow use the same CSS class? give the arrow another class, and give it a higher z-index value than the border – avb Oct 25 '12 at 08:56
  • They don't.. the div containing the border has class 'roadmapstep', and the div containing the image has class 'nextarrow'.. – Mat Richardson Oct 25 '12 at 08:58
  • Ah, I see now, sorry. I think thirtydot gave the answer to your question than. – avb Oct 25 '12 at 09:00
1

Add z-index:1000; to .nextarrow

DEMO

Try giving the different class name to second div and position:absolute. it works!!

DEMO 2

Sowmya
  • 26,684
  • 21
  • 96
  • 136