I'm working on a case study page and I've created an UL to show off some metrics. I want this UL to float inside the main body copy. Almost working on FF and Safari but IE won't play nice at all. The UL needs to be flexible width and I want each LI to be as wide as it needs to be. End result is to look like a bar graph.

FF and Safari are floating nicely but each LI is as long as the widest one instead of being different widths. IE makes the width as wide as the body copy that the UL is floating in. The first LI (700 registered voters) should look shorter than the second LI (1,845 unique site visitors).

Sorry if this doesn't make sense but check out the link and it should.

6 answers

0
points

Adam, Are you wanting to simulate the look of what's currently at the URL you provided: http://www.garfieldgroup.com/newstudies/casestudiespage.html ? Or like the thumbnail image on the right side of this post page?

Answered about 8 years ago by webcodeslinger
0
points

Can you upload it with your code in place instead of the image? My best guess is that you need to float everything inside the UL as well as just the UL to get the desired effect.

Answered about 8 years ago by Matt Turner
0
points

hey there,

I apologize for not having time to test this myself but this is what I would do:

Float the LI's and set them to "clear:both" or "clear:left" so that they stack vertically and do not wrap. Setting them to float should make them only expand as wide as they need to be.

Next set the UL to Float, which should make the UL only expand as wide as the widest LI. You could even try setting the UL to "inline" or "inline-block". But either way that should do the trick!

Answered about 8 years ago by Efficient Pixel
0
points

Is this what you're looking for? http://bit.ly/kmPVK

Answered about 8 years ago by webcodeslinger
0
points

Alen Grakalic from Css Globe has a pretty good article/solution for bar graphs. Although the example shows vertical graphs you can easily style them into horizontal ones.

Answered about 8 years ago by Jesse Vlasveld
-3
points

Not sure if you will already have the answer to this, but my immediate thought is that it wont work with LI and UL items, but would work with a DIV and H1 tags? Set the DIV to float right and then have the H1 tags with set backgrounds? Add the smaller text with spans or style the numbers with STRONG tags?

Tricky one, the only other thought that occurs would be to use a javascript function (offsetWidth) to detect the width of the element after the DOM is available. And then adjust the width of the DIV or UL to match. Not as neat though.

Good luck, sorry I cant give you a better idea.

A

Answered about 8 years ago by Alan M Sherwood