SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Padding Added In HTML5 Lists

    I'm finding that when I create a list in HTML5 and populate the list items with images, there is some padding added to the bottom of the list item. This is not the case if I use the exact same code in XHTML. The code is pretty basic, a simple unordered list. Each list item element holds an image. I've removed the padding and margin from the ul, li and img elements via CSS. Does anyone know why the gaps are present in HTML5, but not in XHTML? And if so, how do I get rid of them. Here are examples of what I mean. Both pages use the exact same code and CSS. The only difference is the HTML vs XHTML declaration. Thanks for any help or insight.

    List in HTML5 with gaps
    http://www.digitalvisionmedia.com/te...listhtml5.html

    List in XHTML with no gaps
    http://www.digitalvisionmedia.com/te...listxhtml.html

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Both pages look identical in Firefox, and so they should. The way to get rid of that gap is to add this to the CSS:

    img {vertical-align:bottom;}

    By default, images align with the baseline of the text they sit next to—which means the descenders of the text hang down below the image. Here you have no text beside the image, but still the gap is there. So vertical-align: bottom just tells the image not to leave that gap at the bottom.

  3. #3

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Both pages look identical in Firefox, and so they should.
    Actually, maybe I was too hasty there. I was just reading this article about images in HTML email, and someone in the comments mentions different rendering issues with HTML5. Be darned. Not sure if it's relevant here, but worth mentioning, anyway.


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
  •