13 replies [Last post]
tumr
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2006-03-07
Posts: 7
Points: 0

Hi all,

Quick disclaimer: I have scanned the first 15 pages or so of these forums and I haven't been able to find anything similar to what I'm dealing with. Also, I've been abusing Google to no avail.

The deal: I am working to display a bunch of data in floated 'LI's contained within one 'UL'. I've attached the image; you can also see how things stand here: http://www.tumr.com/test/. (The CSS is linked at the top of the page)

The nasty problem that is pretty evident on that page is that the elements leave hideous gaps all over the place. I would like to find a solution to this problem. I've played with floats, with clears, with different positioning methods, all to no avail so far.

In practice we will not know the string length (e.g. length of a school name) so we can't just set a specific height for all of the 'LI's. Ultimately I'm hoping to find some way to either cause the LI's to 'scale up' automatically to fit the empty gaps, or to find some way to at least force them to fit in snugly, pushing the inequalities to the bottom of the 'UL'. If that's not clear, I can try to illuminate this graphically.

Does anyone have any thoughts or suggestions? I'm really slamming my head against the wall at this point. Thank you!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

2-Dimensional Unsorted UL/LI leaving bizarre vertical gaps

If the ul is a set width you could add a class to every 6th li to clear:left
or set the li(Drunk to a height that will accomodate the largest length school

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

2-Dimensional Unsorted UL/LI leaving bizarre vertical gaps

You should be able to use "clear:left" on the every fifth element after the 1st (e.g. 6th, 11th, 16th, etc). Also ids must begin with a letter.

tumr
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2006-03-07
Posts: 7
Points: 0

2-Dimensional Unsorted UL/LI leaving bizarre vertical gaps

Wolfcry and Chris..S,

Thanks for your reply. Per your suggestion I tested that out (http://www.tumr.com/test/clearleft.htm), but it doesn't remove the gapping problem. This seems to be a legitimately tricky issue... (As a side note, I will deal with the illegal id naming when I get ready to get this CSS to validate. Thank you for the heads up.)

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

2-Dimensional Unsorted UL/LI leaving bizarre vertical gaps

Chris..S wrote:
You should be able to use "clear:left" on the every fifth element after the 1st (e.g. 6th, 11th, 16th, etc). Also ids must begin with a letter.

erm, yeah, I can count...
I meant 5th :oops:

You didn't place the clearing elements in the right locations. You started on the 4th, not the 6th.

re: the ids, don't change them just to pass validation - they're wrong and different browsers will interpret them differently and only add to your coding confusion.

You're also going to want a doctype to put browsers in standards mode. And please tell me that's not a <font> tag - OMG it is!

tumr
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2006-03-07
Posts: 7
Points: 0

2-Dimensional Unsorted UL/LI leaving bizarre vertical gaps

wolfcry911 wrote:
Chris..S wrote:
You should be able to use "clear:left" on the every fifth element after the 1st (e.g. 6th, 11th, 16th, etc). Also ids must begin with a letter.

erm, yeah, I can count...
I meant 5th :oops:

re: the ids, don't change them just to pass validation - they're wrong and different browsers will interpret them differently and only add to your coding confusion.

Wolfcry,

You and Chris..S are convincing; fortunately, my 'real' script is PHP generated and it will be trivial for me to just toss an 'a' in front of each of those ids without harming the functionality.

Like I mentioned above, though, the "clear:left" actually doesn't help me in this case because the container (the 'ul') forces this behavior anyway. I'm trying to get the gapping (vertical, not horizontal) resolved.

For example, on my test page that uses the clear:left trick as you suggested (http://www.tumr.com/test/clearleft.htm, there is still that awkward space between, say, Academy of Art College and Bethany College just below it. That is what I'm really struggling to resolve.

Thanks for the comments!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

2-Dimensional Unsorted UL/LI leaving bizarre vertical gaps

Relying on width doesn't force the behaviour your after. Sometimes an element will float up under another element rather than moving back to the left.

Put your yellow background on the ul. Use an overflow value or clearfix on the ul to get it to surround the li elements.

example

tumr
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2006-03-07
Posts: 7
Points: 0

2-Dimensional Unsorted UL/LI leaving bizarre vertical gaps

Actually, this gives me a good opportunity to clarify. In the post just supra, I talked about Academy of Art College and Bethany College.

So, what I would like to do (using an example to represent the general case) is either (1)force Academy of Art College to automatically vertically-elongate to match its vertically longer neighbor, Art Center College of Design, or (2) force Bethany College to 'snuggle up' to the base of Academy of Art College. Hope that illuminates things a bit.

Edit: I think Chris..S may have just nailed this. I will check things out on my end and let everyone know. Thanks Chris..S![/i]

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

2-Dimensional Unsorted UL/LI leaving bizarre vertical gaps

I guess I'm not understanding then. Are you trying to eliminate the white background space? Couldn't you just set the ul background to the same as the li?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

2-Dimensional Unsorted UL/LI leaving bizarre vertical gaps

For better or worse, floating doesn't work that way. If you are using a a fixed width generate the vertical grids with a repeating gif for the ul background.

Otherwise you could try and work something out with display:table and display:table-cell. That won't work with IE of course.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

2-Dimensional Unsorted UL/LI leaving bizarre vertical gaps

Why can't you set the height to something like 3.5em, which will enclose the longest school name you have and hold it for a couple text size changes?

tumr
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2006-03-07
Posts: 7
Points: 0

2-Dimensional Unsorted UL/LI leaving bizarre vertical gaps

Wolfcry,

The reason that I'm not just trying to get rid of the whitespace but am actually trying to ensure that there will be some element-size uniformity will probably make more sense if you see the 'working' example that I have going on my site: http://www.tumr.com/dd/.

Basically, I need people to be able to click and drag and I don't want to confuse people by just coloring in the background, obscuring the actual limits of the draggable 'LI' elements.

Your point about the set-height is valid, but I'm trying to avoid that because there are many cases in which an item takes up 3 lines, but there are just as many in which the item only takes up one. So I'd have to settle for 2, 3, or 4 lines of height, which would really be annoying for states like WA that only have 1-line-height items. Navigating around that site will give you a good sense of what I'm talking about, I think.

Thank you for your help, and for your interest.[/url]

tumr
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2006-03-07
Posts: 7
Points: 0

2-Dimensional Unsorted UL/LI leaving bizarre vertical gaps

tumr wrote:
Edit: I think Chris..S may have just nailed this. I will check things out on my end and let everyone know. Thanks Chris..S![/i]

Sadly it turns out that this doesn't actually resolve my problem. The gap still exists, but is just hidden by color. Going to http://www.tumr.com/dd/ will give a good example for why I can't just set my 'ul' background color to be the same as my 'li' background color - my users have to know where the 'li' boundary is located in order to use the site properly.

If I could just force those short 'li's to elongate when they're situated next to a taller 'li'...

It does this:

------------- ------------------
| short li | | i am a much |
------------- | taller and .|
. | bolder li .|
------------------

but it should do this:

------------- ------------------
| | | i am a much |
| short li | | taller and .|
| .| | bolder li .|
------------ ------------------

tumr
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2006-03-07
Posts: 7
Points: 0

2-Dimensional Unsorted UL/LI leaving bizarre vertical gaps

wolfcry911 wrote:
Why can't you set the height to something like 3.5em, which will enclose the longest school name you have and hold it for a couple text size changes?

Wolfcry,

I'm going to go ahead and use this. Upon trying it out I really like it - thank you for the suggestion!