CSS Sprites Inside Padded Elements

Question

I have a list where I am using background-image CSS sprites for the links. The problem I was having was that I want padding around the sprite without having to go back and recreate all my images. The only way I could get it to work right was by using a div for the actual sprite, otherwise the padding causes the other half of the sprite to be visible.

The problem is that this is not W3C valid. A div cannot be in an li, at least it shouldn't.

<div id="social-bar">
    <ul id="social-links">
        <li>
            <a href="http://twitter.com" title="Twitter">
                <div class="sprite twitter">Twitter</div>
            </a>
        </li>
        <li>
            <a href="http://facebook.com" title="Facebook">
                <div class="facebook sprite">Facebook</div>
            </a>
        </li>
        <li>
            <a href="http://instagram.com" title="Instagram">
                <div class="instagram sprite">Instagram</div>
            </a>
        </li>
        <li>
            <a href="http://www.youtube.com" title="YouTube">
                <div class="youtube sprite">YouTube</div>
            </a>
        </li>
    </ul>
</div>

#social-bar {
    /*margin-left:auto;*/
    /*margin-right:auto;*/
    width:100%;
    text-align:center;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 5px;
    /*background-color:#f9f9f9;*/
    /*border-top: 1px solid #f9f9f9;*/
    /*border-bottom: 1px solid #f9f9f9;*/
}
#social-links {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    text-indent:0px;
    width:100%;
}
#social-links li {
    display:inline-block;
    width:54px;
    height:54px;
    margin-left:20px;
    margin-right:20px;
    /*padding:8px;*/
    /*border: 4px solid #f9f9f9;*/
    border: 4px solid #dadada;

}
#social-links a {
    display:block;
    width:100%;
    height:100%;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    position:relative;
    overflow:hidden;
}
#social-links a:hover {
    background-color:#ff379f;
}
#social-links img {
    padding-top:8px;
}

.sprite {
    width:100%;
    height:0px;
    padding-top:38px;
    overflow:hidden;
    background-repeat:no-repeat;
    position:relative;
    float:left;
    display:block;
    font-size:0px;
    line-height:0px;
}
.sprite.twitter {
    background-image:url(/images/social/twitter-sprite.png);
    margin-top:8px;
    background-position: 4px 0px;
}
#social-links a:hover .sprite.twitter {
    background-position: 4px -38px;
}
.sprite.facebook {
    background-image:url(/images/social/facebook-sprite.png);
    margin-top:8px;
    background-position: 18px 0px;
}
#social-links a:hover .sprite.facebook {
    background-position: 18px -38px;
}
.sprite.instagram {
    background-image:url(/images/social/instagram-sprite.png);
    margin-top:8px;
    background-position: 8px 0px;
}
#social-links a:hover .sprite.instagram {
    background-position: 8px -38px;
}
.sprite.youtube {
    background-image:url(/images/social/youtube-sprite.png);
    margin-top:8px;
    background-position: 8px 0px;
}
#social-links a:hover .sprite.youtube {
    background-position: 8px -38px;
}
.sprite.rss {
    background-image:url(/images/social/rss-sprite.png);
    margin-top:8px;
    background-position: 8px 0px;
}
#social-links a:hover .sprite.rss {
    background-position: 8px -38px;
}

Padding and sprites do not go well together unfortunately. Why not just make the div tags span tags? — JoeyP, Mar 06 '13 at 01:14
I believe a `div` is allowed in a `li`, according to the spec. But, not in `a`. http://stackoverflow.com/questions/3011934/can-we-give-div-within-li Regardless, I understand that you wouldn't want to do this. — matthewpavkov, Mar 06 '13 at 01:18
Since you already have your `a` set to `block`, just make the `div` a `span` as @JoeyP suggested, and then make the `span` a `block`. I don't see a way around it. The alternative, of course, is to just modify your sprites. — matthewpavkov, Mar 06 '13 at 01:21
Since you are floating the `.sprite` class you don't even need to use `display:block` — JoeyP, Mar 06 '13 at 01:27
@JoeyP converting to spans cleared up all the issues. If you create an answer I'll accept it. — Dex, Mar 06 '13 at 02:09

score 1 · Accepted Answer · answered Mar 06 '13 at 02:47

1

Converting your sprite div to span should solve the issue of W3C validaty. As @matthewpavkov pointed out div is allowed in li but not in a.

Since the span tags are floated the css display:block; is not needed.

answered Mar 06 '13 at 02:47

JoeyP

2,622
2
26
25

score 0 · Answer 2 · answered Mar 06 '13 at 02:20

0

Use span tags instead of div tags. Problem solved.

However, I recommend recreating the sprites, just to use more semantic code altogether.

answered Mar 06 '13 at 02:20

Xarcell

2,011
6
33
65

CSS Sprites Inside Padded Elements

2 Answers2