Posted by Fred on 04/24/07 13:00

On Tue, 24 Apr 2007 05:57:01 GMT, Neo Geshel <gotcha@geshel.org>
wrote:

>Scott_From_PA wrote:
>> The following issue has been plaguing me for the longest time.
>>
>> I'm having trouble controlling line height for bullets using <ul>
>> <li></li> </ul>. This is not usually housed in DIV but in a table (I
>> know I know tables are dead)
>>
>> When I assign a height (height: 22px;) to <li> it seems to be treated
>> differently in IE AND FF.
>>
>> For example, when the text in a bullet point wraps to the second line
>> the specified height of 22 stays at 22 instead of expanding to house
>> the extra line. The second wrapped line of text then overlaps the next
>> bulleted line of text. THIS DRIVES ME NUTZ!
>>
>> What is the proper way to control line height for lists so that they
>> are treated equally for both IE and FF?
>>
>> Could the issue be that I'm housing the lists within the table instead
>> of a <div>?
>>
>> Thanks for your help!
>>
>>
>Ah. You used *height* (http://www.w3schools.com/css/pr_dim_height.asp)
>instead of the intended *line-height*
>(http://www.w3schools.com/css/pr_dim_line-height.asp).
>
>Height specifies the author-suggested height of the entire li and its
>contents. Line-height specifies the spacing between the lines of text
>that the li contains.
>
>By setting height to 22 pixels, you are asking the browser to crunch the
>entire li to 22 pixels in hight. Add an overflow:hidden; to the style
>sheet, and see what happens. Overflow is closely tied to the physical
>dimensions of an element; if that element has more content than its
>author-suggested height (or width) can display, the overflow property
>tells the browser what to do with that extra content. In your case, it
>would hide everything past the first 22 vertical pixels of your li.
>
>I hope this helps.
>...Geshel

Thanks a ton Geshel!

[Back to original message]