wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes How to make colored variable length bars in FF? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "How to make colored variable length bars in FF?" Watch "How to make colored variable length bars in FF?" New topic
Author

How to make colored variable length bars in FF?

D Rog
Ranch Hand

Joined: Feb 07, 2004
Posts: 472

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.


Retire your iPod and start with HD Android music player Kamerton | Minimal J2EE container is here | Light weight full J2EE stack | and build tool | Co-author of "Windows programming in Turbo Pascal"
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Feb 07, 2004
Posts: 472

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

Joined: Nov 08, 2001
Posts: 15376
    
    6
This what you are trying to do?



Eric
D Rog
Ranch Hand

Joined: Feb 07, 2004
Posts: 472

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

Joined: Nov 08, 2001
Posts: 15376
    
    6
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
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: How to make colored variable length bars in FF?
 
Similar Threads
How To Write Some Text in a Horizontal Rule?
css-position absolute problem
Revisiting DIV
DIV and CSS Help
page header