How can I create dynamic barcharts with HTML

I can't stop a minimum height of about 30px being shown

[daveo]

I'm trying to create a vertical bar chart / graph using coloured <span> tags that have 'dynamic' css style properties. This works fine for widths and placements on the page until you have a height of 0 pixels - I can't stop a minimum height of about 30px being shown...
for example:

<div style=\"position:absolute; left:90px; top:0px; width:20px; height:0px; background-color:#87ceeb; border: solid #000000 1; margin:1;\"></div>

stills shows a block with a non-zero height. any ideas?

[choster]

font-size:0

Also, I notice that you didn't indicate units for your border or margin; try

border: 1px solid #000; margin:1px;

[daveo]

Crikey, that was quick. And it has helped. You are a star. Cheers

[grahamstewart]

You shouldn't actually need the

font-size:0

(tho it is a handy trick). You just need to make sure there is no text in your div.

Remember that white space counts, so...

<div id="bar1"> 
</div> 

..is actually a div containing a single space.

Where as..

<div id="bar1"></div> 

..is a proper empty div.

Some browsers ignore this but other (quite rightly) do not.

You get the same problem with..

<img src="gif1.gif"> 
<img src="gif2.gif"> 

instead of...

<img src="gif1.gif"><img src="gif2.gif">

[daveo]

I get your drift, but I'm pretty sure there is no 'whitespace' in the <div></div> tags.