CSSで横に伸縮するボタンについて

質問

参考サイトを基にして、横に伸縮するポタンをCSSで
作っており、FireFox2.0ではうまく表示されるのですがIE6および7では右側が切れて表示されてしまい困っております。
どなたかご存知の方、作成中のHTMLを掲載いたしますので、「このプロパティ部分が抜けている」等ご指摘願えませんでしょうか？

●参考サイト
http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php

●サンプルHTML
<div id="searchArea">
<a class="button active" href="#">
<span>あああああああああああああああ</span>
</a>

<a class="button" href="#">
<span>あああああ</span>
</a>
</div>

<style>

a.button {
background:url(form_buttons.png) no-repeat 0 0;
text-decoration:none;
height:30px;
color:#222;
display:-moz-inline-box;
display:inline-box;
margin-right:8px;
}

a.button span {
background:url(form_buttons.png) no-repeat right top;
height:30px;
display:-moz-inline-box;
line-height:1;
margin:0 -16px 0 10px;
padding:8px 20px 0 10px;

}

a.button:hover {
background-position:left -60px;
}

a.button:hover span {
background-position:right -60px;
}

/*アクティブ*/
a.active {
background:url(form_buttons.png) no-repeat left -120px;
}

a.active span {
background:url(form_buttons.png) no-repeat right -120px;
}

</style>

回答No.1

miya_00

＞CSSで横に伸縮するボタンについて
参考サイトの画像は伸縮しているわけではないです。そうみせているだけです。

HTMLとCSSをのせられても、実際に使う画像がどうなっているか分からない限り、参考意見を出す事は難しいですね。

参考サイトのhtmlとCSSをみてマネたら直ぐに出来ると思いますが…
ちなみに参考サイトで使っている画像はこれです。
http://www.hedgerwow.com/360/dhtml/css-round-button/form_buttons.png

後はbackground-positionの指定を上手い事使えば、同じように出来ますよ。