CSS
#navbar {
position: absolute;
z-index: 1
}
HTML
<div id="navbar">
略
</div>
<div id="contents">
略
</div>
CSSとJavascriptを使って、プルダウンメニューを作ったのですが、IE7でうまく動かない為ネット検索したところ、CSSの「position:absolute;」に対して、「"absoluteした要素が消える"というIEのバグ?」の記事に出会いました。
このため「position:relative;」としてみたのですが..
メニューの下のコンテンツがプルダウンメニューのプルダウンされる大きさの分だけ下に下がって空間が空いてしまい、メニューバーの下にコンテンツがすぐ在ってその上にプルダウンするメニューが重なる、という表示ができなくなってしまいました。
なにかよい方法はありますでしょうか。
No.2ベストアンサー
- 回答日時:
細かな内容が分らないので、上手く説明出来ませんが、妥協案としては
position: relative;した要素のmargin-bottom等にネガティブマージンを
適用(-○○px等)してあげて、IE6対策でoverflow:hiddenを使えば
対処療法にはなるのでは。。
私の場合、position:absoluteして消えた場合は、基本前後のfloatが影響しているか、
text-align等が悪さしているか、たまにz-indexで後ろに隠れてしまっている
か、絶対配置の基準になるposition:relativeの位置がおかしいかを考え、一つづつ潰していきます。
回答有難うございました。
CSSについてまだ素人なので、片っ端からネット検索かけてプルダウンメニューのサンプルを探し、色々試してデザイン・動作とも上手く使えそうなものにHTMLと併せて書き直しました。
今回のご回答については、HPの改定時にまた役立てようと思います。
No.1
- 回答日時:
ご紹介のサイトは既に見ていました。「clear」は使用してないので「width:100% の float」だと思ったのですが、不具合はIE7でなので、それも違う。とりあえず「<div class="extra">extra box</div>」の追加を試しましたが何も変わりませんでした(~_~)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS htmlとcssで吹き出しの中に文字を置きたいのですが、 html 〈div class bb〉 〈 3 2023/02/04 22:44
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript 画面に表示したらアニメーションを開始したい 3 2023/01/13 15:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
1から100までの自然数のうち、2...
-
超音波で洗脳。
-
CSSのセレクタに指定するbodyと...
-
smallにtext-allignが効かない
-
「諸要素」とはどういう意味で...
-
【ヒトの神秘】美男美女から何...
-
aの中にspan
-
リンク付き画像を右よりに表示...
-
aタグ 中央寄せ
-
cssで好きな位置に好きなボック...
-
<div>でレイアウトすると上下に...
-
html5で右揃え、方法は?
-
初歩的な質問です。<div>のwidt...
-
あるタグが反応しません...
-
HTMLで <p>~</p>内で2回以...
-
border: noneでボタンの境界線...
-
<object>
-
<br />と<br>は同じ意味ですか?
-
Bootstrap レスポンシブ textarea
-
imgタグをそのまま使うことは正...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
超音波で洗脳。
-
質問1.
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
タグは大文字と小文字どちらが...
-
改行ほどは行かないけど、若干...
-
2個のFormを横並びにしたい
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
CSS:overflow要素の印刷について
-
textareaの幅を画面と合わせたい
-
親要素・子要素
-
テキストボックスの中にリンク...
-
emとstrongの反対
-
cssのdisplay:block
-
border: noneでボタンの境界線...
-
tdに対してmin-heightの定義、...
おすすめ情報