- 締切済み
background:での画像指定 MacのIEだけ正しく表示されません。
下記のCSSを使用してwebを作成しています。 マウスオーバー時のgif画像がMac用のIE ver.5.23では 文字列とかけ離れた箇所に表示されます。 文字列は画面右であるのにgifは画面左に表示されています。 winのIEやFirefox,MacのNetScapeではきちんと 文字列の左横にgifが表示されます。 なにか良い方法ありますでしょうか？ 使用したcssとbodyを記載します。 <body> <div class="mainNav"> <b>test</b> <hr size=1 noshade width=250 align=right> <a href="http://www.geocities.jp/****/samus/samus_live.html"> <b> live</b> </a> <a href="http://www.geocities.jp/****/samus/samus_member.html"> <b> member</b> </a> </div> </body> /*---- main navi -------------------------------------------------------------*/ .mainNav { position: absolute; top: 10px; right: 10px; width: 98%; text-align: right; margin: 0px; padding 0px 0px 5px 0px; background-color: #ffffff; font-family: "ＭＳ ゴシック", sans-serif; } /*---- リンクの設定 ----------------------------------------------------------*/ a:link { font-size: 90%; color: #999999; text-decoration: none; } /*---- 表示済みリンクの設定 --------------------------------------------------*/ a:visited { font-size: 90%; color: #999999; text-decoration: none; } /*---- マウスオーバーリンクの設定 --------------------------------------------*/ a:hover { font-size: 90%; color: #cd853f; background: url("image/arrow_right.gif") left no-repeat; text-decoration: none; }
- hand_painted_art
- お礼率0% (0/12)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- kolp
- ベストアンサー率34% (35/102)
下から３行目の background: url("image/arrow_right.gif") left no-repeat; のleft（左寄せ）が邪魔してますよね 参考書を見ても、backgroundはブラウザ全体に対して センター合わせや、左右あわせなどの図解しか載っていません。 なので、推測として、MACIEでは例えaタグのマウスオーバーの指定に入っていてもブラウザに対してきいてしまい、 他のブラウザでは、Aタグの左を認識していることになります。 私なら、あきらめて、Javascriptのよくあるロールオーバーを使いますね。 全体を画像にしてロールオーバー指定する、 または今のまま、画像 テキスト 画像 テキストと並べて、 テキストリンクをロールオーバーしたら画像が変わるようにする。（最初に真っ白な画像を配置しておいて、次に矢印を表示するような感じ） ロールオーバーのJavascriptの方が一般的ですし、こういう風に、リンク部分に背景画像を使うやり方は見たことがないので。（あるのかもしれませんが） CSSでＨＰ作成って大変ですよね、、がんばってください。
