Controlling Lists With CSS

[Scott_From_PA]

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!

 

[Neo Geshel]

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
--
***********************************************************************
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 of “NEWSGROUP REPLY FOR NEO GESHEL†(all uppercase).
***********************************************************************

 

[Fred]

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!