Controlling Lists With CSS


S

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!
 
Ad

Advertisements

N

Neo Geshel

Scott_From_PA said:
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).
***********************************************************************
 
Ad

Advertisements

F

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!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top