Cheezy barcharts? How to make coloured inline blocks?

[Howie]

Hi,

I've just been playing this afternoon with adding a cheezy barchart to
an existing database report. The report shows weekly movement in orders
- losses vs new orders. The chart would look like

----|++++++
------|+++
---|++++
|
in line with the existing table rows, each showing one week's data.

Mainly for my own amusement, I decided to try this with no graphical
elements at all - only HTML. So I my original plan was to have 5 spans
and change their background colours and widths to produce the 5 colour
segments per line:
[background][negative bar][black origin line][positive bar][background]

That doesn't work. You can't set the width of inline spans. What does
work in Firefox though is changing the border width instead:
<span style="border-left: solid 63px #fff;"></span>
<span style="border-left: solid 9px #f00;"></span>
<span style="border-left: dotted 1px black"></span>
<span style="border-left: solid 42px #0f0;"></span>
<span style="border-left: solid 93px #fff;"></span>

But that then doesn't work in IE/Win.

Is there a correct way to produce inline blocks of arbitrary colour and
width? I'm assuming at this stage that it's me that's wrong and not IE.

Best Regards,

Howard

[Nick Theodorakis]

Re: Cheezy barcharts? How to make coloured inline blocks?


Howie wrote:[color=blue]
> Hi,
>
> I've just been playing this afternoon with adding a cheezy barchart to
> an existing database report. The report shows weekly movement in orders
> - losses vs new orders. The chart would look like
>
> ----|++++++
> ------|+++
> ---|++++
> |
> in line with the existing table rows, each showing one week's data.[/color]

[...]
[color=blue]
> Is there a correct way to produce inline blocks of arbitrary colour and
> width? I'm assuming at this stage that it's me that's wrong and not IE.
>[/color]

I have a couple of examples of what I think you are trying to do:

<http://theodorakis.net/cssart.html>

Nick

--
Nick Theodorakis
nick_theodoraki s@hotmail.com
contact form:

http://theodorakis.net/contact.html