[問題] 文字欄位與圖片無法對齊

[LokiCjn (我的征途是星之海)]

測試頁面
http://loki.ind.ntou.edu.tw/se_hw/testTop.html

有發現文字位欄位和圖片在Firefox沒有對齊
在IE上會自動對好
請問應該要如何修正呢？
用CSS可以做到嗎？
謝謝

附上相關的原始碼：

(HTML部份)

<div class="mainTitle">
  <span class="left">
    <img src="images/title_image.png" alt="title" width="600" height="60" />
  </span>
  <span class="right">
    <input name="textfield" type="text" size="16"
     maxlength="254" /><a href="#"><img src="images/search.png" alt="search"
     width="56" height="20" border="0" /></a>
  </span>
</div>


(CSS部份)

.mainTitle {
        background-image:url(../images/title_back.png);
        height:60px;
}
.mainTitle span.left {
        float:left;
        text-align:left;
        margin-left:20px;
}
.mainTitle span.right {
        float:right;
        text-align:right;
        margin-right:20px;
        margin-top:10px;
}

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 218.174.144.156