人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSを使ったメニューのロールオーバーに関して。
FireFox1.5で見たら、text-indent:-9999px;のブロック要素が画面の最左端に現れるようになってしまいました。このような現象を解決できる方、教えてください。
(構造)
メニュー1|メニュー2|メニュー3|メニュー4
メニューnは<ul><li><a href="リンクURI">メニューn...となっており、<li><a>ともにdisplay:blockで指定。
ブロック化された<a>メニューn</a>の中の文字をtext-indent:-9999px;しています。ちなみにインデントの負の数値の大きさを変えてもかわりませんでした。
どなたかご教授ください。

●質問者: soyuz11
●カテゴリ:ウェブ制作
✍キーワード:CSS デント ブロック ロールオーバー 教授
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● sight
●27ポイント

<a>メニューn</a>のブロック要素を、

text-indent:-9999px;とかしつつ、overfow: hidden;

なりつつあるのかなぁ、という感触があります。


↓参考になりそうなところ↓

text-indent: -xxxxemの弊害 - LogJET

◎質問者からの返答

早速ためしてみました。

私のPCでは良いのですが

客先のFFだとまだ直っていないようです。

キャッシュでもないとすると

FF固有の設定か何か‥‥‥‥??


2 ● wizemperor
●27ポイント

text-indent: -9999px;だけではなく、

widthによる幅指定と、overflow: hidden;を併用すれば上手くいくような気がします。

ロールオーバーということなので、heightで高さも指定しておくとよいと思います。


li {

width: 128px;

height: 32px;

display: block;

overflow: hidden;

}

a:link {

width: 128px;

height: 32px;

display: block;

overflow: hidden;

text-indent: -9999px;

}

◎質問者からの返答

指定はガッチリしています。

(端折って質問には書きませんでしたが)

ロールオーバー効果については

問題はないのですが、FireFoxで画面左端に

隠れてなくてはならないブロック要素が

なぜか顔を出してしまうのです。


3 ● wizemperor
●26ポイント

私も同様のこと(CSSとtext-indentによる画像のロールオーバー)は普通に使用したりしていますが、そのような不具合はなかったかと思います。

「FireFox1.5で見たら、」とありますが、OperaやNetscapeではいかがでしょうか?

IE特有のバグを利用した設計がまぎれこんでいないかチェックされてみてはいかがでしょうか?

他に考えられることとしては、positon、floatなど配置関連(特に親要素)の指定が悪さをしているような気がします。

一度、スタイルシートをコメントアウトするなどしてシンプルなものにしてテストされてみてはいかがでしょうか?

「客先のFFだとまだ直っていないようです。」とあるので、なんらかの設定や拡張機能が問題になっているのでしょうか。そうだとするとちょっとお手上げです。

参考になるかわかりませんが、私が実際に使っている部分を抜き出してみました。もちろんFireFox1.5でも動作確認をしています。

(<、>はうまく表示できないので全角で書いています。)


HTML:

<h1>タイトル</h1>

<ul>

<li><a href="menu1.html">メニュー1</a></li>

<li><a href="menu1.html">メニュー2</a></li>

<li><a href="menu1.html">メニュー3</a></li>

<li><a href="menu1.html">メニュー4</a></li>

</ul>


CSS:

h1 {

float: left;

}

ul {

list-style-type: none;

}

ul li {

float: left; /* ここにはありませんが、後続の要素でclear: left;を指定して回り込みを解除しています */

width: 96px;

height: 52px;

}

ul li a:link,

ul li a:visited {

width: 96px;

height: 28px;

background-image: url(../images/menu.gif);

background-repeat: no-repeat;

text-indent: -9999px;

overflow: hidden;

display: block;

}

ul li a:hover,

ul li a:active,

ul li a:focus {

width: 96px;

height: 52px;

background-image: url(../images/menu.gif);

background-repeat: no-repeat;

background-position: 0 -60px;

text-indent: -9999px;

overflow: hidden;

display: block;

}

◎質問者からの返答

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ