Win a copy of Think Java: How to Think Like a Computer Scientist this week in the Java in General forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

How to make colored variable length bars in FF?

 
D Rog
Ranch Hand
Posts: 472
Linux Objective C Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I draw bar graphs using something like that:

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
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 472
Linux Objective C Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This what you are trying to do?



Eric
 
D Rog
Ranch Hand
Posts: 472
Linux Objective C Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic