SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Collapsing Padding in List Items?

    I have a question pertaining to the box model and calculated sizes of content boxes. Here are the relevant bits:

    Markup:
    Code:
    <ul>
    	<li><a>Top Level 1</a></li>
    	<li><a>Top Level 2</a></li>
    </ul>
    Style:
    Code:
    a {
    	padding: .5em 2em;
    	border: solid 2px white;
    	border-radius: 1.5em;
    	color: white;
    	background-color: blue;
    	-webkit-background-clip: padding-box;
    	-webkit-box-shadow: 0 2px 3px #333;
    	text-shadow: 0 1px 0 #333;
    }
    
    a:hover {
    	-webkit-box-shadow: 0 0 8px #fff;
    	font-size: 1.2em;
    	text-shadow: none;
    }


    As you can see the 2 'a' tags in the list run into each other. I want to know why it is that the 'li' tags don't consider all the stuff inside (the entire 'a' tag including padding and border) as part of its content block. It seems like the 'a's padding is just hanging outside of the 'li' and that doesn't feel intuitive or right at all. Is there an explanation about how nesting works with padding that I am missing? Can someone explain this 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,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Double posting is bad manners. Anyway, this is probably a better place to post.

    Quote Originally Posted by aoberoi View Post
    I want to know why it is that the 'li' tags don't consider all the stuff inside (the entire 'a' tag including padding and border) as part of its content block. It seems like the 'a's padding is just hanging outside of the 'li' and that doesn't feel intuitive or right at all. Is there an explanation about how nesting works with padding that I am missing? Can someone explain this behavior?
    This is the natural behavior for inline elements (like <a>).

    You could do something like this to fix things:

    Code:
    li {line-height: 3em;}
    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 Member
    Join Date
    May 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bad manners, I agree. I was looking to see if I could delete that thread because I thought this was a better place as well.

    So this is about the <a> tag being inline for sure. When I add display:block to the rule I see that they do not collide, but now I would have to set the width statically. That's not what I was looking for.

    Your suggestion works for the case that everything in the list was going to be about the same height, but I am not sure of that either.

    Do you know where this behavior is documented? I would like to get a better understanding of the different display types and how they are contained inside their ancestor elements. What I am building is more academic anyway so the final result isn't as important to me as understanding what is going on here.

    UPDATE:

    It appears that what I was looking for was to set the <a> elements to display:inline-block. This achieved exactly what I was looking for (in webkit at least).

    UPDATE 2:

    This page is very helpful in understanding the concepts http://www.quirksmode.org/css/display.html

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by aoberoi View Post
    This page is very helpful in understanding the concepts http://www.quirksmode.org/css/display.html
    I found this too:

    http://www.maxdesign.com.au/articles/inline/
    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
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Do you know where this behavior is documented? I would like to get a better understanding of the different display types and how they are contained inside their ancestor elements. What I am building is more academic anyway so the final result isn't as important to me as understanding what is going on here.
    This part of the CSS specs has helped me quite a bit.

    However inlines have all these funky boxes and lines around them... I use David Baron's inline page (sent to me by Gary Turner) to "see" how things like line-height and vertical-align work.

    It appears that what I was looking for was to set the <a> elements to display:inline-block. This achieved exactly what I was looking for (in webkit at least).
    Because anchors start out as inlines, inline-block will work in IE6&7 as well (if the element is originally a block or something else, then IE needs some hacks).
    The engines used in Firefox 2 needs a hack. Current browsers such as K-Meleon still use this older Gecko engine. Usually it's
    display: -moz-inline-box;
    or
    display: -moz-inline-block; (whichever one looks right in the FF2-browsers is the one to use)
    which would go before the regular declaration. If you're not supporting those browsers then you don't need it. All modern browsers and IE8 support regular display: inline-block;


Tags for this Thread

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
  •