画像付きのナビゲーション メニューを作成しようとしています。Chrome と Firefox では問題ありませんが、IE9 ではリンクが機能しません。ホバー効果も機能しません。
www.sabourinpaulwedding.caで私が持っているものをチェックしてください
前もって感謝します。ジル
HTML は、左側の垂直ナビゲーション バーと右側のコンテンツ div です。
<div>
<ul class="nav">
<li class="welcome"><a class="selected" href="#"></a></li>
<li class="ceremony"><a href="ceremony.html"></a></li>
<li class="reception"><a href="reception.html"></a></li>
<li class="accommodations"><a href="accommodations.html"></a></li>
<li class="registry"><a href="registry.html"></a></li>
</ul>
</div>
<div class="content">
<p>Welcome to the digital home of the future Mr. and Mrs. Paul.</p>
<p> </p>
</div>
CSS は画像を使用して、ホバーされたリンクと選択されたリンクを表示します。「見えない」divが一番上にあるため、IEがナビゲーションバーにアクセスできないようです。ナビゲーション バーの z-index で遊んでみました。それはうまくいきませんでした。
ul.nav
{
list-style-type: none;
padding: 0;
margin: 0;
float: left;
z-index: 20;
}
ul.nav a
{
border: 0px solid #cccccc;
display: block;
height: 0px;
padding-top: 72px;
width: 265px;
overflow: hidden;
}
/* Welcome Button */
.nav li.welcome a { background:url('images/welcome_en_normal.png') no-repeat; background-position:0px 0px; }
.nav li.welcome a:hover { background:url('images/welcome_en_hover.png') no-repeat; background-position:0px 0px; }
.nav li.welcome a.selected { background:url('images/welcome_en_selected.png') no-repeat; background-position:0px 0px; }
/* Ceremony Button */
.nav li.ceremony a { background:url('images/ceremony_en_normal.png') no-repeat; background-position:0px 0px; }
.nav li.ceremony a:hover { background:url('images/ceremony_en_hover.png') no-repeat; background-position:0px 0px; }
.nav li.ceremony a.selected { background:url('images/ceremony_en_selected.png') no-repeat; background-position:0px 0px; }
ただし、コンテンツ側からすべての p タグを削除することで機能します...しかし、いくつかのコンテンツが必要です(明らかに)。問題は css .p セレクターにはありません。そこにあるものをすべて削除してもリンクは機能しないためです。