IE6,IE7だとメニューが写真の裏に表示される

締切済

質問者：gonzou123
質問日時：2011/05/08 18:51
回答数：6件

こんばんは。コーディング作業をしており、ヘッダーにドロップメニュー(多階層のメニューバー)を設置し、その下に写真を置いたのですが、メニューをマウスオーバーし、2階層目のカテゴリが出てきた時に、IE6.IE7だと写真の裏に隠れてしまいます。
※ＩＥ8、ＦＦ、Ｍａｃだと写真の前にちゃんと表示されます。

ソースを添付しますので、どこがいけないかご指摘していただけないでしょうか。
よろしくお願いいたします。

[HTMLソース]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript" src="superfish.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('ul#nav').superfish();
});
</script>
</head>
<body>
<div id="container">
<div id="header" class="clearfix">
<div id="menuBottom" class="clear">
<ul id="nav" class="clearfix">
<li><a href="#"><img src="" alt="" width="88" height="29" /></a>
<ul>
<li><a href="#aa">menu item that is quite long</a></li>
<li class="current"><a href="#ab">menu item</a>
<ul>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">short</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<br /><br /><br /><br />
<div id="contents">
<div id="slide" class="fltL">
<div id="slide_body">
<ul>
<li style="margin-left:300px;"><img src="" width="622" height="461" alt="" /></li>
</ul>
</div>
</div>

</div>
</body>
</html>

[上のhtmlに読み込まれているＣＳＳ（style.css）]

#header {
width:950px;
margin:0 auto;
padding-top:19px;
z-index:100;
}
#menuBottom {
float:right;
z-index:0;
}
#container {
width:100%;
text-align: left;
}

/*** ドロップメニュのＣＳＳ ***/
ul li {
margin:0;
padding:0;
}
#nav ul {
position:absolute;
top:-999em;
width:10em; /* left offset of submenus need to match (see below) */
}
#nav ul li {
width:100%;
height:100%;
}
#nav li:hover {
visibility:inherit; /* fixes IE7 'sticky bug' */
}
#nav li {
float:left;
position:relative;
}

#nav li:hover ul,
#nav li.sfHover ul {
left:0;
top:2.5em; /* match top ul list item height */
z-index:99;
_z-index:0;
}
ul#nav li:hover li ul,
ul#nav li.sfHover li ul {
top:-999em;
}
ul#nav li li:hover ul,
ul#nav li li.sfHover ul {
left:10em; /* match ul width */
top:0;
}
ul#nav li li:hover li ul,
ul#nav li li.sfHover li ul {
top:-999em;
}
ul#nav li li li:hover ul,
ul#nav li li li.sfHover ul {
left:10em; /* match ul width */
top:0;
}

/*** DEMO SKIN ***/
#nav {
float:left;

}
#nav ul li a {
display:block;
position:relative;
padding:0.75em 1em;
border-left:1px solid #fff;
border-top:1px solid #CFDEFF;
text-decoration:none;
height: 100%;
z-index:15;
}
#nav a, #nav a:visited { /* visited pseudo selector so IE6 applies text colour*/
color:#13a;
}

#nav li li{
background:#AABDE6;
}

/*** 画像部分のＣＳＳ ***/
#slide {
width:624px;
position:relative;
}

#slide_header {
position:absolute;
top:0px;
left:0px;
width:624px;
height:7px;
z-index:2;
background: url(slide_header.png) no-repeat;
}
#slide_body {
background: url(slide_body.gif) repeat-y 0px 0px;
width:624px;
margin:auto;
}
#slide_body img {
margin:auto;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

最新から表示
回答順に表示

No.6

回答者： ORUKA1951
回答日時：2011/05/09 18:03

自分のためにも、細かい部分を修正して整理しておきます。

HTML4.01strictおよびCSS2.1。IE5,6には別途javascriptを利用。
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
でも検証済みです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<meta name="author" content="ORUKA1951">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">

　</style>
</head>
<body>
　<div class="nav" id="NavigationList">
　　<ul>
　　　<li><a href="section1.html">section1</a>
　　　　<ul>
　　　　　<li><a href="section1-1.html">section1-1</a>
　　　　　　<ul>
　　　　　　　<li><a href="section1-1-1.html">section1-1-1</a></li>
　　　　　　　<li class="carent">section1-1-2</li>
　　　　　　　<li><a href="section1-1-3.html">section1-1-3</a></li>
　　　　　　</ul>
　　　　　</li>
　　　　　<li><a href="section1-2.html">section1-2</a>
　　　　　　<ul>
　　　　　　　<li><a href="section1-2-1.html">section1-2-1</a></li>
　　　　　　</ul>
　　　　　</li>
　　　　　<li><a href="section1-3.html">section1-3</a>
　　　　　　<ul>
　　　　　　　<li><a href="section1-3-1.html">section1-3-1</a></li>
　　　　　　　<li><a href="section1-3-2.html">section1-3-2</a></li>
　　　　　　</ul>
　　　　　</li>
　　　　</ul>
　　　</li>
　　　<li><a href="section2.html">section2</a>
　　　　<ul>
　　　　　<li><a href="section2-1.html">section2-1</a>
　　　　　　<ul>
　　　　　　　<li><a href="section2-1-1.html">section2-1-1</a></li>
　　　　　　</ul>
　　　　　</li>
　　　　　<li><a href="section2-2.html">section2-2</a></li>
　　　　　<li><a href="section2-3.html">section2-3</a></li>
　　　　</ul>
　　　</li>
　　</ul>
　</div>
　<div class="section" id="bodyText">
　　<div class="section" id="content">
　　　<blockquote>
　　　　<p><img src="http://upload.wikimedia.org/wikipedia/commons/0/ … width="561" height="523" alt="Orque_Marineland.jpg‎"></p>
　　　　<p>Wikipediaより</p>
　　　</blockquote>
　　</div>
　　<div class="annotation">
　　　<div class="note">
　　　　<p>頭注</p>
　　　</div>
　　　<div class="figure">
　　　　<p>脚注</p>
　　　</div>
　　</div>
　</div>
</body>
</html>

- 0
- 件

通報する

No.5

回答者： ORUKA1951
回答日時：2011/05/09 11:33

IE6は擬似クラスを認識しない(そのくせa:hoverは認識する)し、その代わりにと兄弟セレクタを使おうにもたぶん認識しないので(２階層以上は無理)すが、リンク先でナビゲーションをさせれば問題ないでしょう。

IE6、IE5.5でも対応するように兄弟セレクタ[+]や子供セレクタ[>]は使ってありません。(使えばもっと楽かも)
　それでも、以下のように、シンプルなHTMLとCSSで実現できます。[CSSのためだけのidやclassは一切書かれていないことも理解してください。]
　それぞれの説明はNo.4の説明をご覧ください。継承される宣言、詳細度などを仕様書でよく確認してください。それが一番はの早道です。(王道はありません)
　サンプルを理解されれば、この手のプルダウンメニューで悩むことはないでしょう。よってこれ以上の説明はしません。。

　なお、以下はHTML4.01strictで、タブインデントは全角スペースに置き換えてあります。わかりやすいようにブロックには枠線と背景色が指定されています。z-indexは、この場合１回でよい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
　<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
　<title>サンプル</title>
　<meta name="author" content="ORUKA1951">
　<meta http-equiv="Content-Style-Type" content="text/css">
　<link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" >
　<link rel="START" href="../index.html">
　<style type="text/css">

　</style>
</head>
<body>
　<div class="nav" id="NavigationList">
　　<ul>
　　　<li><a href="">section1</a>
　　　　<ul>
　　　　　<li><a href="">section1-1</a>
　　　　　　<ul>
　　　　　　　<li><a href="">section1-1-1</a></li>
　　　　　　　<li>section1-1-2</li>
　　　　　　　<li><a href="">section1-1-3</a></li>
　　　　　　</ul>
　　　　　</li>
　　　　　<li><a href="">section1-2</a></li>
　　　　　<li><a href="">section1-3</a></li>
　　　　</ul>
　　　</li>
　　　<li><a href="">section2</a>
　　　　<ul>
　　　　　<li><a href="">section2-1</a></li>
　　　　　<li><a href="">section2-2</a></li>
　　　　　<li><a href="">section2-3</a></li>
　　　　</ul>
　　　</li>
　　　<li><a href="">section3</a>
　　　　<ul>
　　　　　<li><a href="">section3-1</a></li>
　　　　　<li><a href="">section3-2</a></li>
　　　　　<li><a href="">section3-3</a></li>
　　　　</ul>
　　　</li>
　　</ul>
　</div>
　<div class="section" id="bodyText">
　　<div class="section" id="content">
　　　<blockquote>
　　　　<p><img src="http://upload.wikimedia.org/wikipedia/commons/0/ … width="561" height="523" alt="Orque_Marineland.jpg‎"></p>
　　　　<p>Wikipediaより</p>
　　　<p>
　　</div>
　　<div class="annotation">
　　　<div class="note">
　　　　<p>頭注</p>
　　　</div>
　　</div>
　</div>
</body>
</html>

- 0
- 件

通報する

No.4

回答者： ORUKA1951
回答日時：2011/05/09 09:44

z-indexに対して誤解が多いようなので、また詳細度に関してはCSSの説明サイトには説明がほとんどされていない(CSSの挙動を示すときに紛らわしくなるのであえてしていないのかも)ので、#や.ばかりのひどいHTMLを記述する誤解も多いので整理しておきます。

まあ、一番簡単な解決方法は、HTML内でナビゲーションを画像より後に記述する。z-indexの指定がなくても上に載るように記述する。
　z-indexは見ている方向からの座標ですから、なんでいきなり10が登場するのかわかりませんが、１とかでもよいはず。きちんと順番がわかっていれば。
　基本的にCSSだけで作ってよいものですが、子供セレクタ(直接の子孫)や兄弟セレクタに対応していないIE6以前はちょっとした工夫が必要です。
　プルダウンメニューを他の要素の上に表示させる場合、そのメニューのz-indexが下になるようそのz-indexよりも大きくなればよいわけですが、この場合いくつか誤解されやすい部分があるので注意してください。
★DOMで考えて次のような階層であると考えます。(ここできちんとマークアップされていることが必要です。
それがされていないと階層をブラウザが判断できなくなる。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^【重要!!】
★あくまで相対的な指定であって、絶対座標を決めるものではない。
　親要素が指定してあれば、それに対しての相対位置!!z-index:0は変化しないことを示す。
★defaultは0である。言い換えればルート以外でz-index:0を指定しても意味がない。
練習問題です。それぞれの前後関係を考えて見ましょう。
body
　|- element1(style="z-index:2")
　|--element2(style="z-index:3")
　| 　|--element3(style="z-index:-1")
　| 　|--element4(style="z-index:0")
　| 　|--element5(style="z-index:-2")
　|--element6
　|--element7(style="z-index:1")
　|--element8(style="z-index:0")

この場合、z座標は上から
element2(Z=3),element4(Z=3)
element3(Z=2),element1(Z=2)
element5(Z=1),element1(Z=1),element7(Z=1)
body(Z=0),element6(Z=0--継承値),element8(Z=0)

となります。
注意)element4でstyle="z-index:0"としていても、その位置は3のままです。

適用の優先順位
　HTMLのマークアップで、いちいちリンク先でもない(=一意で決める必要のない)ものにidなどで、あるいはクラスを指定する必要はありません。CSSは詳細度が高いほうが優先されます。その上で出現の優先順番に従います。
　マークアップは、下記のようなシンプルなもので必要十分です。!!!
<div class="nav" id="NavigationList">
　<ul>
　　<li><a href=""></a>
　　　<ul>
　　　　<li><a href=""></a>
　　　　　<ul>
　　　　　　<li></li>
　　　　　　<li><a href=""></a></li>
　　　　　　<li><a href=""></a></li>
　　　　　</ul>
　　　　</li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　</li>
　　<li><a href=""></a>
　　　<ul>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　</li>
　</ul>
</div>

この場合、
div.nav ul li{display:none;}
よりも
div.nav ul li:hover ul li{display:block;}
のほうが詳細度が大きいので後者で前者の指定は上書きされます。

　この二点(z-indexと詳細度)を理解していたら、ＯＫです。
　なお、IEの古いものは、li:hoverが使えなかったり変な挙動をするので困りますね。

- 0
- 件

通報する

No.3

回答者： abacabu
回答日時：2011/05/08 22:42

独学でＷＥＢサイトを作成している者です。

まず一応
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
と日本語である事を指定しましょう。あとＸＨＴＭＬにおいてはあまり
スクリプトとＣＳＳを内部に書かない方が良いので全て外部参照しましょう。
あとz-indexを色々使っている様ですが、理解して使っていますか？
z-indexはその名の通りｘ、ｙとセットのｚ要素、画面に対して奥(０)と手前（１０）を
設定できるものです。
まず#headerよりも#menuBottomが下にあるというのは理解していますか?
headerにbackground-imageなどを設定した場合当然隠れます。子要素だし。
あとここまでＣＳＳでメニュ―系を設定するなら全てＣＳＳで良さそうですが…
<ul>又は<ol>と<li>を使って組んでdisplay:none,display:block,float:left or right,
float or clear:both or left or right,などを使うとＣＳＳだけでドロップダウンメニュー
作れます。あ、当然:hoverと:hover > ul　っていうのがミソですが。
あと
#nav li:hover ul,
#nav li.sfHover ul { ←あとＸＨＴＭＬではclassでも小文字を推奨してます
left:0;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　全てを小文字です！
top:2.5em; /* match top ul list item height */
z-index:99;
_z-index:0; ←こんなのは聞いた事無いですしリファレンスにも無いと思う
}

ul#nav li:hover li ul,
ul#nav li.sfHover li ul {
top:-999em;　　　←こう言う記述入れるならposition:relative or absoluteを指定した方が
}　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　良いと思います。
ここまで数値がケタ違いになるなら％使っても良いと思います。
あと<br />で行間を指定するべきではないし極力使わない方が良い（文章も範囲を指定して
paddingだったっけな…で自動改行させた方が良いです）
この場合#contentsに対してposition:relativeを設定して下げたいだけtop:-10px;とかで
下げた方が良いと思う。

まぁ色々書いてきましたが、結局のところz-indexの使い方だと思います。
指定した要素を前に置くか(１００)後ろに置くか（０）の辺りが上手く設定されてない気がします。

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2011/05/08 19:41

CSSを示そうにも、HTMLが無茶苦茶です。

　きちんとインデントをとって閉じ忘れや階層間違いがないか確認してください。
　CSSを正しく適用するためには、正しい文書解析木が必要です。

？ナビゲーションリンクの階層は１段階でよいですか？
<div class="nav" id="NavigationList">
　<ul>
　　<li><a href=""></a>
　　　<ul>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　</li>
　　<li><a href=""></a>
　　　<ul>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　</li>
　</ul>
</div>

この回答への補足

ご回答ありがとうございます。
できましたら、3段階層まででお願いいたします。

補足日時：2011/05/08 20:14

通報する

- 0
- 件

通報する

No.1

回答者： noname#132800
回答日時：2011/05/08 19:34

（これはIE独自の仕様です）

****の所にIE６ようのｃｓｓを書く・・・とか、
・・・とワタシはしてます。IE7も同じです。（IE6の場合これが表示されますが、それ以外では表示されません。）

でも、これからのHTML５で書けばIE9でしか対応してないので、結構混乱するかも・・・