Webmaster Forum / HTML, CSS, Scripts / CSS / September 2005

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