ブログのメニューバー内に画像表示をしたいのですが

質問

どうかお助け下さい。

以下の画像のように、メニューバー内のテキスト隣に画像表示をしたいのですが・・・
http://blog-imgs-54.fc2.com/p/a/c/pachislo777question/2012y06m13d_134350964.jpg
http://news4vip.livedoor.biz/
どうしてもうまくいきません。

以下のURL先にあるメニューバー表示方法を使ったのですが・・・
http://10plate.blog44.fc2.com/blog-entry-176.html
どうしても↓のようにズレが出てしまいます。
http://blog-imgs-54.fc2.com/p/a/c/pachislo777question/2012y06m13d_134411361.jpg

具体的には以下のように設定しました。

▼HTMLタグ

<ul id="menu_bar">
<li><a href="<%url>" style="width:120px;">トップページ</a></li>
<li><a href="http://pachislo777question.blog.fc2.com//?xml" style="width:70px;"><Img Src="http://blog-imgs-54.fc2.com/p/a/c/pachislo777question/RSS.png" Width="30" Height="30">RSS</a></li>
<li><a href="<%url>" style="width:120px;">???</a></li>
<li><a href="<%url>" style="width:120px;">???</a></li>
<li><a href="<%url>" style="width:120px;">???</a></li>
<li><a href="<%url>" style="width:120px;">???</a></li>
</ul>

画像に対してAlignタグでテキストを回り込ませると、”RSS”のテキストが自動で中央中段表示になっているようで、どうしても崩れてしまいます。
又、ボタン自体を画像表示させようとも考えたのですが、やはり崩れるようで諦めました・・・

どのようにすればメニューバー内に画像を表示させる事ができるでしょうか？
どうぞよろしくお願いします。

回答No.1

naokita

画像は背景画像にする。
<li>の背景にするか、<a>の背景にするか？は、ケースバイケース

<li style="background: url(http://blog-imgs-54.fc2.com/p/a/c/pachislo777question/RSS.png) no-repeat 2% 50%;"><a href="http://pachislo777question.blog.fc2.com//?xml" style="width:70px;">RSS</a></li>

補足

下記のように設定してみましたが、どうもうまくいきませんでした・・・

■<li style="background: url(画像URL) no-repeat 2% 50%;"><a href="指定先URL" style="width:70px;">RSS</a></li>

宜しければコチラもお願いします。
http://oshiete.goo.ne.jp/qa/7531024.html