I'm having a problem aligning the baseline of images and text that are on the same line. If I have an image right next to text it drops the baseline of the text down a few pixels. I know this is a common problem, but I figured there would be a workaround in CSS. I tried using a vertical-align:text-bottom, but that does not work in IE. It worked in Firefox and Safari just fine. Here is an example of the code I'm using.

.topicheader, .topicfooter {
background:#AEC1D4 url(images/boardbg1.jpg) repeat-x;
border:1px solid #7A98B6;
position:relative;
height:20px;
}
.topic {
line-height:20px;
padding-left:4px;
}
.topic b {
color:#339;
}
.topicbtns {
position:absolute;
right:4px;
top:2px;
height:18px;
}
.topicbtns img {
margin:0;
}
.topicbtns a {
text-decoration:none;
line-height:20px;
}
.topicbtns a:hover {
color:#339;
text-decoration:underline;
}

<div class="topicheader">
<div class="topic">Topic: <b>Wishing well message</b></div>
<div class="topicbtns"><img src="images/icon_reply.png" width="22" height="18" /> <a href="#" class="boldtext">Post Reply</a><a href="#" class="boldtext">Report a Problem</a></div>
</div>

Thanks in advance for the help.