Strange IE7 bug - can anyone help?

I have almost completed my site; wit th exception of the IE6 conundrum, which we won't talk about. However, there is one remaining annoyance in IE7, while all the standards compliant browsers work fine:

The site is http://www.thousandeyes.co.uk/new_site/index_rev_2.html

The problem is on the Route page, and the Team > Aircraft page. I want the round, blue icons to be on the top of other layers, as they are Firefox. In IE7, these round blue icons disappear behind!

Can anyone offer any suggestions? I managed to fix it to an extent, but that broke it for the decent browsers.

Edit: Never mind, solved it with absolute positioning. Annoyingly, there are still slight differences in where IE7 and others put the aircraft background box (the blue one); IE7 puts it a few pixels lower than others. Any ideas?

All browsers seem to have a slightly different implementation of the CSS box model which can causes boxes to end up a few pixels different in each browser. It's tricky to "fix" unless you can generate some of your CSS using server-side scripting language (I actually do this with a couple of my sites). Unless it's throwing other elements of your design out completely, I'd be inclined to live with the lack of perfection! The site looks *really* good now, btw good work!

In the future, if you find some elements are disappearing behind others when you don't want them to, try using the z-index property. Higher numbers sit "on top" of the other elements, so if you have e.g. an icon and you want to make sure it's on top of all the other design elements just add something like

Code:

---

.ontop { z-index: 99; }

---

to your css and

Code:

---

<img class="ontop" src="myicon.gif" alt="My Icon" />

---

to your HTML and you should be good to go!

Thanks very much for your kind words and advice Jim! I had tried using z-index but it did not make a difference; I fixed it eventually by taking the icon completely out of the normal flow and using absolute positioning; oh what fun this web design is ;)

One thing you need to bear in mind with z-index is that it only works on positioned elements (absolute, relative, or fixed).