I am working with an image sprite to create my buttons. They work right in every browser except firefox.

Lets say i have 2 spans next to eachother:

<span class="spanleft"></span><span class="spanright"></span>

and give them some styling(this is the actual code i use for the sprite)

.spanleft{
background:url('/templates/default/img/auction/btn-toolbar.png') no-repeat 0 0;
display:block;
float:left;
height:100px;
width:13px;
}

.spanright{
background:url('/templates/default/img/auction/btn-toolbar.png') no-repeat 0 -104px;
display:block;
float:left;
height:100px;
width:30px;
margin-left:0px;
}

Now this works in every browser i tested, the images line up great. But in firefox I get a small offset. Now i fiddled with the pixels a lot. Its not an offset of 1px, the offset is about 0.5 of a px. yeah.

Ive made a screenshot of what i mean, and i'm going to put in the sprite for the buttons, they make lovely buttons, upstate,downstate,hover,disabled. You can use them in your projects.

Here are the shots:

This is the problem:

Here is the image sprite:

I hop this problem can be solved, i am working with FF 3.6.

thanks guys!