css image building with sprites

Question

I'm trying to create a dynamic icon using css sprites. here's what I keep getting:

So I actually have a couple of questions about what's going wrong:

1. Why is the icon (the box with the cross) not overlapping the purple boxes?
2. Why do the purple boxes have a 2px space between them?

EDIT

Here is a jsFiddle: http://jsfiddle.net/hWhUb/

here's the relavant css i'm using:

.icon {
    position: relative;
    width: 87px;
}

.icon .icon-type {
    position: absolute;
    left: 0;
}

.icon .brigade, .icon .icon-type {
    background-image: url('img/play/splitbrigades.png');
}

.icon-hero {
    width: 87px;
    height: 71px;
    background-position: -11px -11px;
    background-repeat: no-repeat;
}

.brigade-purple-left {
    width: 27px;
    height: 71px;
    background-position: -287px -12px;
    display: inline-block;
    background-repeat: no-repeat;
}

.brigade-purple-middle {
    width: 30px;
    height: 71px;
    background-position: -334px -12px;
    display: inline-block;
    background-repeat: no-repeat;
}

.brigade-purple-right {
    width: 28px;
    height: 71px;
    background-position: -384px -12px;
    display: inline-block;
    background-repeat: no-repeat;
}

and the html:

<div class="icon">
    <div class="brigade brigade-purple-left">&nbsp;</div>
    <div class="brigade brigade-purple-middle" style="width: 22px;">&nbsp;</div>
    <div class="brigade brigade-purple-right">&nbsp;</div>
    <div class="icon-type icon-hero">&nbsp;</div>
</div>

can anyone explain to me what I'm doing wrong, and possibly how I could achieve my result in a better way (if possible)?

Answer 1

add float: left to .icon .brigade

.icon .brigade {
    float: left;
    margin: 0;
}

this should fix everything you need or get you in the right place to finish it off!

the spacing between the purple boxes is because you were using display: inline-block; and the white space in your markup between these divs, generates that spacing.

the icon is not rendered "above" the boxes because it's missing the top: 0; declaration

Answer 2

You should use this. It must contain top.

 .icon .icon-type   { position: absolute; left: 0; top:0}

Live :

http://jsfiddle.net/hWhUb/1/