SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Paragraph margins dissapear when a list is added

    I have a weird problem with paragraph margins collapsing when i insert a list. Say I have the following code:
    Code:
    <p>
    text
    <ul>
    <li>list</li>
    </ul>
    more text
    </p>
    Paragraphs and ul’s both have 20px bottom margins in this code (css styled). However in the above example, the margin under “more text” disappears. To get it back, I have to enclose “more text” in its own p tags, like this:
    Code:
    <p>
    text
    <ul>
    <li></li>
    </ul>
    </p>
    <p>
    more text
    </p>
    Is this normal behavior?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It's not good syntax to place a <li> inside a <p> (that's one block level element inside another, generally not allowed).

    This is better:

    Code:
    <p>text</p>
    
    <ul>
    <li>list</li>
    </ul>
    
    <p>more text</p>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I will do that from now on. But is the behavior I described normal for a situation like that (list inside paragraph)? I am not used to my margins just evaporating into thin air!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It could be an issue of collapsing margins.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is completely invalid markup! A p element cannot contain a ul.

    Since the </p> end-tag is optional in HTML, the paragraph will be closed before the list starts. Then you'll get a superfluous </p> after the list and some dangling text.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,
    I had not known that lists were not allowed inside p tags. My issue is solved now.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •