Member Avatar for randomkid73

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
  • 115 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by randomkid73

Recommended Answers

All 5 Replies

Member Avatar for LastMitch

@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 because: grammer
Member Avatar for randomkid73

Sure. Here's the sprite
And the site

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

Edited by randomkid73
Member Avatar for ajbest

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}

commented: This did it for me! I knew there had to be a better way of doing this. +0
Member Avatar for LastMitch

@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 because: grammer
Member Avatar for randomkid73

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!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.