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

まずは以下のファイルを「IEで」御覧下さい。
http://tantramachine.com/body.html
http://tantramachine.com/top.css
ポップアップするメニューをCSSで作ろうと弄ってみたのですが、何故かIE6だとポップアップが立ち上がる部分と立ち上がらない部分があります。FireFoxだと全てのポップアップが表示されるのですが、理由が解りません。
また、IEとFireFoxだと、ポップアップの立ち上がる位置が大幅にずれます。

この二つについて、どうスタイルシートを書いたら問題が解決されるか、是非皆様のお力をお貸し下さい。そのものズバリには高めのポイントを割り振りますので、そのままソースを書いていただくと助かります。

●質問者: 有我悟
●カテゴリ:ウェブ制作
✍キーワード:CSS firefox IE IE6 スタイルシート
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● talepanda
●50ポイント ベストアンサー

IEでもポップあっプアは全て立ち上がりましたよ。

cssのほうで、.menu ulセレクタを

.menu ul{ position :relative; top : 20px ; left : 0px; margin:0px; padding:0px;border:solid 1px white; }

テキストエリアがFirefoxだと進入してくるので、htmlのほうで、columnではなく

<textarea rows="12" style="width:380px">

こんな感じでいいんじゃないですか?

.menu ul に白のボーダーをつけてるのは、これがないと手元のIEではポップアップの水平位置がずれる。

なぜだろう。

リストについては、

http://www.tagindex.com/stylesheet/list/margin_padding.html

が参考になります。

◎質問者からの返答

えと、本当でしょうか? IEで、一番上のサイトマップ、3つ目のDragon Questのメニューは立ち上がりますでしょうか? うちでは無理です……。何故だろう。

リストタグの描画の違いは大変参考になりました。


2 ● talepanda
●50ポイント

>IEで、一番上のサイトマップ、3つ目のDragon Questのメニューは立ち上がりますでしょうか? うちでは無理です……。何故だろう。

わかりました。訪問済みのアンカに:hoverが適用されないんですね。

.menu a:hover, .menu a:visited{/*--ここから下、%使う時はIEに注意---*/
display:block;
text-decoration:none;
}

ここを

.menu a:visited{text-decoration:none;}
.menu a:hover {
display:block;
text-decoration:none;
}

こうすればポップアップは出ますね。なぜだかわかりませんけど、:visitedのdisplay:blockの処理がおかしいみたいですね。

◎質問者からの返答

すすすすばらしぃ!! 納得できました! そうですよね、ありがとうございます感動しました。こういうのって自分だけだと全然解らないので本当に助かりました。

はてなで久し振りに質問して、本当にいい回答を頂けたの、久し振りなんですごく嬉しいです。

関連質問


●質問をもっと探す●



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