0

Hi all,

I've got a sprite with a few icons on it that I'm trying to implement on my site. They are used in multiple places on the page and need to have different properties. Sounds simple enough, but I'm having trouble finding the right selectors to get this to work. Here's how things are layed out:

<body>
    <aside id="sidebar">
        <ul> <!-- for nav links -->
            <li>
                <div class="icon icn_new_article"></div> <!-- example class and icon -->
                <a href="url">New Article</a>
            </li>
        </ul>
    </aside>
    <section id="main">
        <table>
            <tr>
                <td><div class="icon icn_jump_back"></div>Reply</td
            </tr>
        </table
    </section>
</body>

And the basic CSS is this:

.icon {
    background: transparent url(../images/icn_sprite.png) no-repeat;
    width: 17px;
    display:inline-block;
    margin-right:-17px;
    margin-bottom:-4px;
}

.icn_add_user { height:17px;background-position: 0 -126px; }

, for example. So the problem I'm facing is that, specifically, the margins are different for the sidebar and the table uses. I've tried doing #sidebar .icon and #main .icon to specify the different margins, but then the background-position property from the rest of the definitions are ignored and set to 0,0.

I could just override the margin-right property inline with style="margin-right:0px;" but that seems unnecessary. Thanks in advance for your help.

3
Contributors
5
Replies
6
Views
4 Years
Discussion Span
Last Post by randomkid73
0

@randomkid73

I've got a sprite with a few icons on it that I'm trying to implement on my site.

Can you take a snapshot of website with that code on it.

So we can have a better understanding what you are talking about and also have a better understanding how to assist you with this.

This should look fun.

Edited by LastMitch: grammer

0

Sure. Here's the sprite
And the site

EDIT: The sidebar with the above classes. The table icons are blank here

Edited by randomkid73

1

I would try eliminating the margin definition from the icon style all together. You would then make specific classes to control the margins in the various locations. IE .icon-sidebar-margin{margin:10px}

Votes + Comments
This did it for me! I knew there had to be a better way of doing this.
0

@randomkid73

So the problem I'm facing is that, specifically, the margins are different for the sidebar and the table uses.

I think I might know what you talking about now.

I attach your icons. Instead of 1 whole icons. I split it in half. So it will easily manage plus you can make it 1 column instead of 2 column which is why split it.

118216

Edited by LastMitch: grammer

0

Thanks ajbest, I was able to adapt your idea to get it to work. Since the margins were really the only different thing, I just did

.icon {
    background: transparent url(../images/icn_sprite.png) no-repeat;
    width: 17px;
    display:inline-block;
}

.icon-sidebar {
    margin-right:-17px;
    margin-bottom:-4px;
}

.icon-main {
    margin-right: 10px;
}

Thanks guys!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.