CSSを使ったメニューのロールオーバーに関して。

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

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

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

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

text-indent: -xxxxemの弊害 - LogJET

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;

}

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

}