Привет всем - я гуглял это как можно больше, но ничто, что я делаю, кажется, не помогает.
Я работал над веб-сайтом (www.philipdukes.co.uk), и хотя навигация, кажется, работает нормально в FF, Safari, Chrome, даже IE6 (чудесным образом), на моей системе она терпит неудачу в IE8: навигационные ссылки не работают.
Я наведите на них курсор, получите анимацию при опрокидывании, но они не "кликабельны". Это основные текстовые ссылки, выровненные по тексту за пределами экрана, и тогда область, которую они представляют, должна быть кликабельной. Изображение, которое заполняет пространство, не является ссылкой. Если я удаляю изображение, я могу щелкнуть область, и если я удаляю выравнивание текста, я могу щелкнуть текст ссылки (но только текст ссылки).
Это сводит меня с ума, так как это последнее, что мне нужно разобрать, прежде чем все полностью заработает ...
Код для навигационной панели здесь:
<div class="navHolder">
<div class="nav current-home">
<div id="home"><img src="images/nav/home.png" alt="home." /><a href="index.html">home.</a></div>
<div id="bio"><img src="images/nav/bio.png" alt="biography." /><a href="bio.html">biography.</a></div>
<div id="media"><img src="images/nav/media.png" alt="media." /><a href="media.html">media.</a></div>
</div>
<div class="nav2 current-home">
<div id="press"><img src="images/nav/press.png" alt="press." /><a href="press.html">press.</a></div>
<div id="pdr"><img src="images/nav/pdr.png" alt="plane dukes rahman trio." /><a href="pdr.html">Plane Dukes Rahman Trio.</a></div>
<div id="contact"><img src="images/nav/contact.png" alt="contact." /><a href="contact.php">contact.</a></div>
</div>
и стиль CSS здесь (любая оптимизация здесь также приветствуется!):
/*
*
* BEGIN NAV SECTION
*
*/
.navHolder{
position: relative;
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
.nav, .nav2 {
width: 600px;
height: 50px;
position: relative;
overflow: hidden;
margin: 0 auto;
padding: 0;
top: 0;
}
#home, #bio, #media, #press, #pdr, #contact{
position: absolute;
top: 0px;
overflow: hidden;
width: 200px;
height: 50px;
background: url(images/nav/nav-back.png) 0 0 no-repeat;
}
.nav a, .nav2 a{
position: absolute;
z-index: 100;
display: block;
top: 0px;
height: 50px;
width: 200px;
text-indent: -9000px;
}
.nav img, .nav2 img{
position: relative;
z-index: 50;
width: 200px;
height: 50px;
}
#home, #press{
left: 0;
}
#bio, #pdr{
left: 200px;
}
#media, #contact{
left: 400px;
}
.current-home #home, .current-bio #bio, .current-contact #contact, .current-press #press, .current-pdr #pdr, .current-media #media{
background-position: 0 -246px;
}