CSSテクニックコミュの横並びロールオーバーメニューの？？？

スイマセン完全にハマり込んでしまいました…
サイズの違う画像ボタンを横並びに配置してロールオーバーさせたいだけなのですが…現時点ではIEでもFireFoxでも見た目的なレイアウトは同じなのですが…IEではキチンとボタンとして機能するのですが、何故かFireFoxでは一番右端のボタンだけは大丈夫なのですが、他のボタンは全て機能しません…

*****html*****

<div id="header_top-menu">
<ul>
<li id="info"><a href="#">お知らせ</a></li>
<li id="insti"><a href="#">施設案内</a></li>
<li id="course"><a href="#">コース情報</a></li>
<li id="service"><a href="#">サービス案内</a></li>
<li id="access"><a href="#">アクセス</a></li>
<li id="camera"><a href="#">ライブカメラ</a></li>
</ul>
</div>

*****CSS*****

div#header_top-menu ul{
margin: 0px;
padding: 0px;
list-style: none;
text-indent: -12345px;
}
div#header_top-menu ul a{
display:block;
}
li#info a{
background:url(../image/info90_45.jpg);
background-repeat: no-repeat;
background-position: left;
margin: -45px 0px 0px 286px;
width: 90px;
height: 45px;
}
li#info a:hover{
background-position:right;
}

/*中略*/

li#camera a{
background:url(../image/live-camera125_45.jpg);
background-repeat: no-repeat;
background-position: left;
margin: -45px 0px 0px 736px;
width: 125px;
height: 45px;
}
li#camera a:hover{
background-position:right;
}

イロイロとイジっているうちに自分でもワケが分からなくなってきました…ゴールデンウィーク中に申し訳ございませんが、どなたか助言を宜しくお願いいたします。

コメント(10)

最初
全て
最新の40件

[1] mixiユーザー 05月05日 03:08

float:leftを使ってみては？

div#header_top-menu ul a{
display:block;
float:left;
}
li#info a{
background:url(../image/info90_45.jpg);
background-repeat: no-repeat;
background-position: left;
width: 90px;
height: 45px;
}

[2] mixiユーザー 05月05日 13:34

恐れ入ります、りえぞうサン
ここにトピたてる前に過去ログとかを見て、同じ症状はなかったものの横並びのボタンについてはいくつかあったので参考にさせてもらって色々やってみた時にfloatもやってみたはずですが…確かFFでは機能しましたがIEではボタンすら表示されなかったはずです
なんか根本的に間違った方向に進んじゃってるんでしょうか…

[3] mixiユーザー 05月05日 13:46

根本的に間違ってるのは質問の仕方ですかねｗ

中略されたソースを眺めたって、問題解決はなかなか図れませんよ。
doctypeスイッチ、文書型がCSSでは重要です。
htmlとcssのファイル全体と、画像ファイルがないと、同じ現象を発生させるのは難しいので、チェックするために、想定で同じようなものを作ってまでいちいちみんながやってくれると思います？
逆に自分だったらやります？

うまくいってない状態のページ（本物を出すのが都合悪いなら同様の問題が発生するテストページ）を用意して、URLを貼り付けて見てもらうほうが、回答をもらえると思いますよ。

今の状態で言えそうなのは、リストアンカーのmargin指定が邪魔、ってことくらいでしょうか。

関係ないけど、classやIDの名前に、ハイフンやアンダーバーを含めるのはあんまりよくないですよ。

[4] mixiユーザー 05月05日 14:47

らきサンのおっしゃる通りですね…
中略した部分はソースの造りから言って同じ事を繰り返しているだけなのでカットした方が見やすいかなっと思い省いていました。
IEで機能している事や、画像レイアウトは崩れていない事もあってサンプルファイルも創っていませんでした…
一応問題の部分だけコピペしてサンプルページをあげてみました。

http://www.guri-guri.com/sample/sample.html
http://www.guri-guri.com/sample/css/sample.css

[5] mixiユーザー 05月05日 15:20

あっコレ↓のせいですね…外したらキチンと機能しました。

div#menu h2 {
text-indent: -12345px;
background:url(../image/top-menu_right39_45.jpg);
background-repeat: no-repeat;
width: 39px;
height: 45px;
margin: 0px 0px 0px 861px;
}

右端の画像部分だけ他の方法で入れるように変更いたします。
お騒がせいたしました…ただ何がどうしてこうゆう不具合になったのかサッパリ分からず…画像はキチンとレイアウトされているし右端のボタンのみ機能しているし…とりあえず今回は時間に余裕がないので暇みてジックリと考えてみます。

※ハイフン、アンダーバーは望ましくないんですか…勉強になりました。ありがとうございました。

[6] mixiユーザー 05月05日 16:39

bodyのマージンを設定してあげて、
li#info a の部分も絶対配置にしてあげたらいけそうだけな～。
実験できませんが…
きになるのは、「margin: -45px 0px 0px 286px; 」の部分なんですけど
マージンにマイナスの値って一般的なんでしょうか？
僕的には何かマージンにマイナスの値を入れるのは、なんとなく文法的に本末転倒な感じがしているのですがどうなんでしょう？

[7] mixiユーザー 05月05日 17:19

>Sakuサン
ありがとうございます。
サンプルでは入れてないですが、制作中のhtmlのbodyにはmargin､paddingともゼロを入れてあります。
それとmargin: -45px 0px 0px 286px;の部分ですが
見出しタグを画像に変えて入れてあるので、マイナスマージンを入れてあげないと任意の位置に表示出来ませんでした…liタグにposition:absolute;も使ってみましたがFireFoxでは上手く機能したのですがIEではレイアウトすら維持出来ませんでした…
とりあえず今は上記の通り見出しタグに画像を入れ込むのはやめたので現在はマイナスマージンは使ってませんが…

[8] mixiユーザー 05月05日 18:14

やってみました。一応win98のIE6でオッケーでした。
もちろんFireFoxとマックのsafari、IE、ネスケでも○です。
http://www.eonet.ne.jp/~as312391/test/2000.html
http://www.eonet.ne.jp/~as312391/test/000.css

でもh2を外したらちゃんと動作したんだからマージンのマイナスの値が悪いわけでもないだろうし、もともとの原因ははっきりしませんね

[9] mixiユーザー 05月05日 18:24

ありゃりゃ？
完璧ですね！素晴らしいです！！
各々のliタグにposition:absolute;を入れて位置を指定しただけですよね？
なんででしょ？？？
昨日イロイロと試している時に間違いなく試したハズだったのですが…Sakuサンが組んでくださったモノと同じ風に組んだはずなので…たぶん、その時にスペルミス等のケアレスミスかなにかで
レイアウトが崩れたんでしょうね…お恥ずかしい限りです。
完全にテンパってしまっていてトピ立てて大騒ぎまでしてしまって申し訳ありませんでした…Sakuサンにはキッチリと組みなおしてまでいただきまして本当に感謝感激です！
しかし、やはり右端のボタンのみ機能したり、レイアウト自体は崩れない理由は分かりませんが、方向自体は間違っていないようなのでイロイロと試しつつスキルアップに励みたいと思います。
Sakuサンはじめ時間を割いてくださった全ての方々に、ありがとうございます。

[10] mixiユーザー 05月05日 19:56

自己解決できたようでなによりです。
今後用に情報のポインタだけ。

ハイフンとアンダーバーをトークンに含めるのは仕様的にはおっけーです。

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/types.html

6.2 SGML基本形式あたり。
xhtmlではxmlで始まっちゃダメとか追記があるけど、まぁ似たようなもん。

でも、使わないほうがいい理由
http://www.keynavi.net/ja/bugh/css_misc.html

4.7その他のCSSバグあたり。
googleで、”CSS バグハイフン”みたいなので調べるとわんさか。

もうさすがに無視しても問題ないような気もするけど、くせでついよくないとか言っちゃいました。
仕様上はおっけーなので、最終的には個々の判断でいいと思います。すいません。

あと、トピの本題からずれるような気もするけど、たんにロールオーバーしたいだけなら、

・表示する画像は１枚にする（全部くっつける）
・その画像の文字部分を切り抜いて透過する（普通と逆。）

・div#header_top-menu の背景を白にする
・同じく背景画像をくっつけた画像にする
・div#header_top-menu ul li a:hover の背景を黄色(?)にする

のほうが、コンパクトで楽だと思いますよ。
いちいち個別に指定しないでいいし、色変えるときも画像なおさなくていいし、切り替えで画像がちかちかしないし、何より軽い。

お試しアレ。

ログインすると、みんなのコメントがもっと見れるよ