Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts

    ul ignores the margins of first li and last li?

    ul will not extend to include the top margin of the first li or the bottom margin of the last li.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    ul {
    	margin: 0px;
    	padding: 0px;
    	list-style-type: none;
    	background-color: yellow;
    	width: 100px;
    }
    ul li {
    	background-color: #9F0;
    	margin: 15px 10px;
    	padding: 0px;
    }
    </style>
    </head>
    
    <body>
    <ul>
        <li>haha</li>
        <li>hehe</li>
    </ul>
    </body>
    </html>
    the yellow background of the ul should stretch by 15px upward and downward, which is the margin of the li, but it doesn't ~~~

    P.S. if I add ul { padding-top: 1px }, the 6px(=5+1) 'margin' will show up ~~~

    why is there such a strange behaviour of ul? anyone can help?
    Last edited by mehere8; 07-11-2011 at 03:17 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    P.S. if I add ul { padding-top: 1px }, the 6px(=5+1) 'margin' will show up ~~~
    Set overflow:auto; to <ul> to overcome collapsing of margins.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    mehere8 (07-12-2011)

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Use following code. It will solve your problem:

    Code:
    ul {
        list-style-type: none;
        background-color: yellow;
        width: 100px;
        padding: 5px 10px;
    }
    ul li {
        background-color: #9F0;
        }

    Cheers

  • #4
    Regular Coder
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by abduraooft View Post
    Set overflow:auto; to <ul> to overcome collapsing of margins.
    That works! Thx very much. I went through the link you gave but didn't find similar solution to yours. Anyway could I know why your method works?

    Quote Originally Posted by vikram1vicky View Post
    Use following code. It will solve your problem:

    Code:
    ul {
        list-style-type: none;
        background-color: yellow;
        width: 100px;
        padding: 5px 10px;
    }
    ul li {
        background-color: #9F0;
        }

    Cheers
    Ya, you changed the behaviour of my list items. No separation between them~~
    Last edited by mehere8; 07-11-2011 at 06:15 PM.

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,889
    Thanks
    43
    Thanked 202 Times in 201 Posts
    the reason Abduraooft's method worked is because of the link he provided... check it out- useful stuff in there

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Posting Permissions

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