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;しています。ちなみにインデントの負の数値の大きさを変えてもかわりませんでした。
どなたかご教授ください。

回答の条件
  • 1人3回まで
  • 登録:2006/05/31 18:14:59
  • 終了:2006/06/07 18:15:08

回答(3件)

id:sight No.1

sight回答回数69ベストアンサー獲得回数12006/05/31 19:05:14

ポイント27pt

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

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

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


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

text-indent: -xxxxemの弊害 - LogJET

id:soyuz11

早速ためしてみました。

私のPCでは良いのですが

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

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

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

2006/05/31 19:31:53
id:wizemperor No.2

wizemperor回答回数379ベストアンサー獲得回数522006/05/31 21:10:09

ポイント27pt

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;

}

id:soyuz11

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

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

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

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

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

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

2006/05/31 21:39:07
id:wizemperor No.3

wizemperor回答回数379ベストアンサー獲得回数522006/05/31 22:42:32

ポイント26pt

私も同様のこと(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;

}

id:soyuz11

    にはdisplay:block入れていないのですね。

    某有名CSSサイトのソースを見たら

    いずれも書いていたので私も使っているのですが。。。

    ウィルスソフトを外したら問題なく表示されたようです。

    javascriptなどが上書きされるようですが

    ソースを見ても障りそうな部分はないので技術的には謎が残っています。

    ううむ。気持ち悪いなあ。

2006/06/02 17:39:54

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません