css画像置換を使ったロールオーバーボタンが表示されない

2009/04/15 13:58

このQ&Aのポイント

ナビゲーションリストを作成しています。アンカーリンクしたテキストをindentで飛ばして背景画像を表示させ、マウスオーバーはa:hoverで背景画像を高さぶんずらして対応するタイプ、いわゆる画像置換式のロールオーバーボタンを作りました。
制作環境はMac OSX DreamWeaverCS3です。DreamWeaverの作成画面でこのボタン部分が空白で表示される事が気になっています。Firefox,safari,Operaではうまく表示されているのですが、windowsXP IE7で空白表示となります。
ネット上のレンダリングサービスでは、windowsXP IE7でDreamWeaverの作成プレビューと同じように空白表示となってしまいます。友人のwindowsXP IE7では表示されているそうですが、ネット上のレンダリングサービスは不完全なので問題があるのかわかりません。

takeetakee
お礼率66% (96/144)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

abril
ベストアンサー率69% (388/560)

2009/04/15 15:05 回答No.1

> 制作環境はMac OSX DreamWeaverCS3です。まず気になるのが、DreamWeaverの作成画面でこのボタン部分が空白で表示される事です。これはそんなものなのでしょうか。当方が確認できたのはWindows XP上のDreamweaver8ですので多少環境が食い違いますが、やはり同じ様にtext-indentをマイナス値にした部分には何も表示されていなかったですね。この仕様が「そんなもの」なのかどうかはわかりかねますが…デザイン・ビュー画面での表示はあまり気にされない方が宜しいかと思います。CSSの仕掛けの凝り具合によっては、そこまで解釈しきれないのか、結構ぐっちゃぐっちゃな表示になるみたいですから。 > windowsXP IE7でDreamWeaverの作成プレビューと同じように空白表示となり、以下のサンプルで当方のWindows XP上のIE7で閲覧する限りは、特に支障なく表示されていましたよ。 ※本件のDOCTYPE等不明でしたので、質問者様の過去の質問でのソースに準じました。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" media="screen,print" /> <title>あ</title> </head> <body> <ul id="navi"> <li><a href="#" class="bt1">テキスト</a></li> </ul> </body> </html> ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- body { margin: 0; padding: 0; background: #fff; } ul#navi { margin: 0; padding: 0; list-style: none; } ul#navi li { margin: 0; padding: 0; } a.bt1 { display: block; width: 150px; height: 50px; text-indent: -9999px; background: url(images/bt1.jpg) no-repeat; margin: 10px 0px 0px 0px; float: left; overflow: hidden; } a:hover.bt1 { background-position: 0px -50px; } ---------------------------------------------------------------------- > もしや何か間違っているのではと思いはじめました。この検証結果や、このソース自体を見る”限りでは”特に間違った指定をしている様には見受けられませんが。

質問者