- ベストアンサー
css画像置換を使ったロールオーバーボタンが表示されない
- ナビゲーションリストを作成しています。アンカーリンクしたテキストを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）
- 専門家の回答
質問者が選んだベストアンサー
> 制作環境は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; } ---------------------------------------------------------------------- > もしや何か間違っているのではと思いはじめました。 この検証結果や、このソース自体を見る”限りでは”特に間違った指定をしている様には見受けられませんが。
お礼
確認作業までして頂きまして本当にありがとうございます。 DreamWeaverのプレビューはそこまで気にすることは無いんですね。 確認はネット上サービスに極力頼らずにやっていこうと思います。