Controlling Lists With CSS

Discussion in 'HTML' started by Scott_From_PA, Apr 23, 2007.

  1. 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!
     
    Scott_From_PA, Apr 23, 2007
    #1
    1. Advertising

  2. Scott_From_PA

    Neo Geshel Guest

    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
    --
    ***********************************************************************
    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).
    ***********************************************************************
     
    Neo Geshel, Apr 24, 2007
    #2
    1. Advertising

  3. Scott_From_PA

    Fred Guest

    On Tue, 24 Apr 2007 05:57:01 GMT, Neo Geshel <>
    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!
     
    Fred, Apr 24, 2007
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. JustSomeGuy

    Sorting lists of lists...

    JustSomeGuy, Jun 17, 2004, in forum: C++
    Replies:
    0
    Views:
    338
    JustSomeGuy
    Jun 17, 2004
  2. Jon Slaughter

    lists of lists

    Jon Slaughter, Dec 13, 2004, in forum: C++
    Replies:
    4
    Views:
    443
    Buster
    Dec 13, 2004
  3. Charlotte Henkle

    Counter for items in lists in lists?

    Charlotte Henkle, Sep 25, 2004, in forum: Python
    Replies:
    8
    Views:
    415
    Charlotte Henkle
    Sep 26, 2004
  4. =?UTF-8?B?w4FuZ2VsIEd1dGnDqXJyZXogUm9kcsOtZ3Vleg==

    List of lists of lists of lists...

    =?UTF-8?B?w4FuZ2VsIEd1dGnDqXJyZXogUm9kcsOtZ3Vleg==, May 8, 2006, in forum: Python
    Replies:
    5
    Views:
    434
    =?UTF-8?B?w4FuZ2VsIEd1dGnDqXJyZXogUm9kcsOtZ3Vleg==
    May 15, 2006
  5. kkarre
    Replies:
    0
    Views:
    284
    kkarre
    Mar 5, 2008
Loading...

Share This Page