ссылки на изображение и зависание не работают, т.е.

Question

Я пытаюсь создать меню навигации с изображениями. Ссылки не работают в IE9, хотя проблем с Chrome и Firefox нет. Эффект зависания также не работает.

Проверьте, что у меня есть на www.sabourinpaulwedding.ca

Спасибо заранее. Gilles

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>&nbsp;</p> 
</div> 

В CSS используются изображения для отображения зависающей ссылки и выбранной ссылки. Кажется, что IE не может получить доступ к панели навигации, потому что «невидимый» div находится сверху. Я играл с 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, потому что если я удалю все там, ссылки все равно не сработают.

Answer 1

Это может быть потому, что теги пусты попробовать эту разметку

<ul class="nav"> 
    <li class="welcome"><a href="#" class="selected">Welcome</a></li> 
    <li class="ceremony"><a href="ceremony.html">Ceremony</a></li> 
    <li class="reception"><a href="reception.html">Reception</a></li> 
    <li class="accommodations"><a href="accommodations.html">Accomodations</a></li> 
    <li class="registry"><a href="registry.html">Registry</a></li> 
    </ul> 

и CSS

ul.nav a { 
    border: 0 solid #CCCCCC; 
    display: block; 
    height:0; 
    padding-top: 72px; 
    width: 265px; 
    overflow:hidden; 
} 

имеет побочный эффект того, чтобы быть SEO дружественных в качестве бонуса