How to make colored variable length bars in FF?

[D Rog]

I draw bar graphs using something like that:

<div style="width:108px;display:inline"><div style="position:relative;display:inline;left:4px;background-color:green;width:@element.count@px;padding:0"></div></div>

It works quite well for IE, but colapsed for FF. I can insert a dummy image to the variable length DIV to make it working, however I do not want to deal with images. Is any other elegant solution without involving images working for both browsers?


* :@element.count@ is name of variable which get numeric value at time of delivering a page to browser.

[Eric Pascarello]

The problem you have is you are using inline. Inline elements do not have a width. If you set up the browser to be in compliance mode, you would probably see IE act badly too.

You want to use float instead of inline. You probably alos want to add a non breaking space inside the div.

Eric
[ February 04, 2008: Message edited by: Eric Pascarello ]

[D Rog]

Thank you for the idea. I tried and it didn't work through. Anyway, I have a food for more research now. Could you point me on a reference you use? I use a good one, however it covers style, but display attribute.

[Eric Pascarello]

This what you are trying to do?

<style type="text/css">
 
  #div1{
    width: 250px; float: left; background-color: #CC5511;
  }
  #div2{
    width: 100px; float: left; background-color: #55CC11;
  }
  #div3{
    width: 150px; float: left; background-color: #1155CC;
  }
 
</style>
 
<div id="div1"> </div>
<div id="div2"> </div>
<div id="div3"> </div>

Eric

[D Rog]

Yes, I tried like that. It continued working with IE but behaved bad with FF. Actually my case a bit complicated, because I use aligned text, so I use an extra wrapping div for that.

A page with a poll I trying to make look nicely under FF

It is really not big deal for me, so do not waste time for helping, unless you have some curiosity.

[Eric Pascarello]

Well it is not that pretty, but you could set the height to 100% and set a height for wrapper or holder div.

[/code]
<style type="text/css">

#div1, #div2, #div3{ height:100%;}

#div1{
width: 250px; float: left; background-color: #CC5511;
}
#div2{
width: 100px; float: left; background-color: #55CC11;
}
#div3{
width: 150px; float: left; background-color: #1155CC;
}

#holder{
height: 60px;
}
</style>

<div id="holder">
<div id="div1">foo bar text that is long and long and long</div>
<div id="div2">asdsad asd asd sad a sdsa d sad </div>
<div id="div3">askljd laksj as ldj lkasjd kasd lsadkj sadk</div>
</div>
[/code]


Probably not what you want...but it is 1:30AM on a Friday and I am off to bed.

Eric