text and image alignment

Hello,

I’m having a problem with aligning text next to an image.
In firefox it displays correct, but in internet explorer it’s not.

Firefox example

Internet explorer example

The html:

<div id="switchbox"><span>Change View: </span>
<span class="normswitch"><a href="/cms/"><img src="/cms/wp-content/themes/coolmentality/img/blank.gif" title="Display posts in normal view" width="20" height="20"></a></span>
<span class="thumbswitch"><a href="/cms/thumb-view/"><img src="/cms/wp-content/themes/coolmentality/img/blank.gif" title="Display posts in thumbnail view" width="20" height="20"></a>
</span></div>

The css:

.normswitch {float:right;background:url(img/normview.png) no-repeat 0;margin: 0px;}
.normswitch:hover {background:url(img/normviewh.png) no-repeat 0;margin: 0px;}
.thumbswitch {float:right;background:url(img/thumbview.png) no-repeat 0;margin:0px;}
.thumbswitch:hover {background:url(img/thumbviewh.png) no-repeat 0;margin:0px;}
#switchbox {float:right;width:150px;height:20px;padding:10px 10px;margin-top:2px;}

I hope someone can help me with this, because I’ve tried vertical-align, middle and alot more, but it just doesn’t get displayed correctly in internet explorer.
I’ve also searched google, but nothing worked. It’s problably something simple I’m overseeing, but can’t figure it out.