Sprites and text size

---

I've created a sprite at a website I'm开发者_高级运维 using to learn CSS at http://flexibletheme.tumblr.com/, however since the width is set at 24px the text tries to make a small vertical column.

Anyway to get it to render normally with 24px of margin on the right?

---

You should put your sprite inside of a nested <span> instead of wrapping it around your link text. Like this:

<a href="#"><span class="sprite"></span>Sample Link</a>

Be sure to either float your sprite to the left or make it display:inline-block; so that it can retain a width and height but still be inline with your link text.

---

ditch the width:24px; add padding-left:24px

---

You should wrap the element around your sidebar unordered list and children instead of closing it before it does anything:

<aside>
   <ul>
      <li>stuff</li>
   </ul>
</aside>

Then give it a width, or let content and sidebar float and clear them after. (I'd also recommend looking into stuff like grids for ease.. http://978.gs/)

---

write this white-space: nowrap; in your a tag

#links li a{white-space: nowrap;}

---

If IE7 support (and below) is not an issue, you could use :before pseudo element without adding any extra mark-up:

#links a {
    display: block;
    position: relative;
    padding: 2px 2px 2px 30px;
    min-height: 20px;
    line-height: 24px;
}
#links a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    background: url(http://static.tumblr.com/wgijwsy/itFlt1l8x/links.png);
}
a#rss:before { background-position: -24px 0 }
a#facebook:before { background-position: 0 -24px }
a#twitter:before { background-position: 0 -48px }

Otherwise, add span inside the anchors and replace a:before with a span.icon.

And move the h2 outside of your ul. That's invalid HTML.