The issue: you have wrapped your LI elements inside your anchor elements which is an inline element while the LI element is a block level element, simply switch them around and the problem should fix itself given your CSS is correct and semantic.

@wolfcry911 Correct, however they shouldn’t wrap list items. The immediate children of lists should be list items.

The li element represents a list item. If its parent element is an ol, ul, or menu element, then the element is an item of the parent element’s list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

@wolfcry911 You don’t ever need to feel foolish mate, it would be impossible to remember every little detail of the HTML5 specification. Besides, you are one of the top contributors to the CSS-Tricks forums and I respect all the advice that you give.

So just to follow up.. Putting the image inside the markup didnt work because it was a sprite, and would re size when adjusting the width. So I had to change the css to be #whatever a { display:block } so I could still have the background image and the text indent.

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by MediaTemple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.