Image sprite not lining up in firefox
- by Saif Bechan
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!
