Layering images inside a table-cell

Question

I want to layer 4 images on top of each other inside a table cell with css. Here is what I want the final image to look like:

The 4 images are:

1. The gray rounded corner rectangle with the red shaded triangle and the numbers
2. The blue bar
3. The lines on top of the bar
4. The yellow triangular indicator

All these images must be on top of each other within the a table-cell. The bar must be able to stretch (I would draw it with a css div with a variant width property if it's possible) and the triangle indicator to move, so the entire thing can't be one image.

Any ideas how to do this?

Note: any solutions have to work in IE6 and up, Firefox, and Chrome

Answer 1

If this was my challenge, I think I'd be looking at a full-fledged charting solution to make this a quick, painless process and give a better looking (and animated?) result.

Here's a near dead ringer that I found with some quick Google-Fu: http://www.fusioncharts.com/widgets/Gallery/Linear1.html

I've had to do a lot of charting of late for applications I build and I --used-- to hand-roll all my charts and tables. Not any more! Between HighChart, FusionCharts, and JqueryUI, it's all covered, no reason to invent the wheel....and they look better.

Answer 2

Would this be what you want to do?: How to let an HTML image overlap another