PDA

View Full Version : height problem li element



fibonacci23
Dec 16th, 2008, 08:40 PM
Hi there.

im having a hard time figuring out the following problem:
I got a <ul> in a <div> (its a list for a tabmenu). The <ul> got <li> items with a background-image, each tab.

the width of the items is about 137px. When the content of the items is larger then the 137px, it brakes the content into two lines. Thats fine by me, cos the background image is large enough to contain it. My only problem is that the other <li> elements dont resize automatically. So i got one <li> that is way bigger then the other <li> elements.

(the standard height of a <li> element is 16px, only when its content is too big, it gets a height of 30px)

How can i fix it that a <li> takes the size of the biggest <li> in a <ul>.
I tried min-heights, auto heights and a lot of other options, but i cant figure it out!:mad:

Anyone knows a solution to this problem?? Would be nice!:thumbsup:

Cheers!

BoldUlysses
Dec 16th, 2008, 08:53 PM
Post your complete code (in code tags) and/or a link to your page. Otherwise it's just guesswork on our part.

Excavator
Dec 16th, 2008, 09:12 PM
Hello fibonacci23,
It sounds like you've got an li that wraps when it needs to and you want other li's to wrap when the first one does, even though they have no content.

I can't see any way to do that other than setting the larger height on all li's, then they would all be the same but they would be that height all the time.

fibonacci23
Dec 16th, 2008, 09:26 PM
Hello fibonacci23,
It sounds like you've got an li that wraps when it needs to and you want other li's to wrap when the first one does, even though they have no content.

I can't see any way to do that other than setting the larger height on all li's, then they would all be the same but they would be that height all the time.

Yes, thats exactly what i mean!
And indeed, they would have the same height then all the time, and thats exactly what i dont want to happen :(

Cos they have to turn back to the normal height when there is no li that wraps...

But there is no way to fix that u say... hmm, bugger

Excavator
Dec 16th, 2008, 09:31 PM
But there is no way to fix that u say... hmm, bugger

Well, certainly no way using CSS anyway. Maybe someone would be able to do it with js? I don't know.

fibonacci23
Dec 16th, 2008, 09:38 PM
Well, certainly no way using CSS anyway. Maybe someone would be able to do it with js? I don't know.

right, that was what i was thinking of, a css solution.
I want to stay away of js solutions all the time ;)

thosecars82
Nov 12th, 2010, 02:24 PM
right, that was what i was thinking of, a css solution.
I want to stay away of js solutions all the time ;)

Did you find a solution for this yet?
Thanks

DrDOS
Nov 12th, 2010, 06:14 PM
I don't know if this would help you, since I haven't seen how you are using the list, but there is another kind of list which most people don't seem to have even heard of. It's a 'definition list' and it's behavior is quite different from the ul/ol type. It uses dl, dt and dd tags. the dl is the wrapper, dt is like a label or heading, dd is equivalent to the list items. The interesting behavior here is that the dd's don't wrap unless you set a width, and all the dd's take on the width of the longest one, so you have a very uniform looking menu.

Excavator
Nov 13th, 2010, 05:21 AM
I'll have to play with that a bit DrDos, I never noticed the dd acting that way. I'm not sure this will help the op though, I took his descriptiong to mean his issue was the height of his li.