Controlling Lists With CSS

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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!

Re: Controlling Lists With CSS

Scott_From_PA wrote:
Quoted text here. Click to load it
Ah. You used *height* ( )=20
instead of the intended *line-height*=20
( ).

Height specifies the author-suggested height of the entire li and its=20
contents. Line-height specifies the spacing between the lines of text=20
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=20
sheet, and see what happens. Overflow is closely tied to the physical=20
dimensions of an element; if that element has more content than its=20
author-suggested height (or width) can display, the overflow property=20
tells the browser what to do with that extra content. In your case, it=20
would hide everything past the first 22 vertical pixels of your li.

I hope this helps.
  My return e-mail address is an automatically monitored spam honeypot.
  Do not send e-mail there unless you wish to be reported as a spammer.
  Please send all e-mail to my first name at my last name dot org, with
  a subject-line of80=9CNEWSGROUP REPLY FOR NEO GESHEL=E2=80=9D (all=

Re: Controlling Lists With CSS


Quoted text here. Click to load it

Thanks a ton Geshel!

Site Timeline