HTML & CSS
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
List in XHTML with no gaps
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:
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.
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.