мои ссылки не работают (должно быть просто исправлено)

Question

У меня проблема со ссылками в правом верхнем углу на этой странице (http://athemespage03.tumblr.com/). Я просмотрел все в своем коде миллион раз, пытаясь убедиться, что все было правильно напечатано, и это так. Я не могу понять, что случилось. Помогите?

Вот моя таблица стилей: (проблема с ДИВЫМ ид «квадратами»)

body { 
     background: url("https://unsplash.imgix.net/reserve/wpYap0TYQ3mElk0kRbYn_LagunaHIke.jpg?q=75&fm=jpg&s=d189029620c20323a937f5125a6ad96d") 
     no-repeat center center fixed; /*CHANGE BACKGROUND IMAGE HERE*/ 
     -webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
font-style:none; 
font-family:calibri; 
color:{color:text}; 
font-size:9px; 
    } 

    body, a, a:hover { 
    cursor: url(http://img69.imageshack.us/img69/7673/cursorw.png), progress; 
    } 

    /*everything*/ 

    #everything { 
    margin-left:250px; 
    margin-top:100px; 
    } 

    /*--title--*/ 

    #title { 
    font-family: 'Reenie Beanie', cursive; 
    font-size:80px; 
    position: fixed; 
    top: 80px; 
    left: 280px; 
    letter-spacing: 3px; 
    color:#fff; /*--CHANGE TITLE COLOR HERE--*/ 
    z-index: 1; 
overflow: auto; 
width: 98%; 
    } 


#transbox { 

position: fixed; 
top: 150px; 
right: 200px; 
width: 600px; 
height: 350px; 
background-color: #fff; 
border: 1px solid #000; 
opacity: 0.7; 
filter: alpha(opacity=60); 
} 

#transbox a:hover { 
opacity: 1.0; 
filter: alpha(opacity=100); 
} 

    /*--links--*/ 

    #squares { 
    width:630px; 
    font-size:10px; 
    font-family:'calibri'; 
    text-transform:uppercase; 
    text-align:center; 
    margin-top:10px; 
    margin-left:250px; 
    } 

    #squares a { 
    padding:3px; 
    color:#000; 
    display: inline-block; 
    margin-left: 2px; 
    height: 5px; 
    width: 5px; 
    border: solid #000 1px; 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out; 
    -o-transition: all 0.4s ease-in-out; 
    -ms-transition: all 0.4s ease-in-out; 
    transition: all 0.4s ease-in-out; 
    } 

    #squares a:hover { 
    color:#fff; 
    background-color:#999; 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out; 
    -o-transition: all 0.4s ease-in-out; 
    -ms-transition: all 0.4s ease-in-out; 
    transition: all 0.4s ease-in-out; 
    } 


    #navigation a { 
    font-family:'calibri'; 
    display:block; 
    color:#000; 
    font-size:12px; 
    margin-top: 20px; 
    padding:6px; 
    text-align:center; 
    letter-spacing:2px; 
    text-transform:uppercase; 
    text-decoration: underline; 
    margin-bottom:5px; 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out; 
    -o-transition: all 0.4s ease-in-out; 
    -ms-transition: all 0.4s ease-in-out; 
    transition: all 0.4s ease-in-out; 

    } 


#navigation a:hover { 
    background:#999; 
    color:#fff; 
    opacity: 1.0; 
filter: alpha(opacity=100); 
    } 

и вот мое фактический HTML тело:

<div id="everything"> 

<div id="title">navigation</div> 

<div id="transbox"> 

    <div id="squares"> 
     <a href="/" title="home"></a> 
     <a href="/ask" title="message"></a> 
     <a href="http://tumblr.com/dashboard" title="dash"></a> 
    </div> 


<div id="navigation"> 
    <table style="width:100%"> 
     <tr> 
      <td><a href="/">link</a></td> 
      <td><a href="/">link</a></td> 
      <td><a href="/">link</a></td> 
     </tr> 

     <tr> 
      <td><a href="/">link</a></td> 
      <td><a href="/">link</a></td> 
      <td><a href="/">link</a></td> 
     </tr> 

     <tr> 
      <td><a href="/">link</a></td> 
      <td><a href="/">link</a></td> 
      <td><a href="/">link</a></td> 
     </tr> 

     <tr> 
      <td><a href="/">link</a></td> 
      <td><a href="/">link</a></td> 
      <td><a href="/">link</a></td> 
     </tr> 

     <tr> 
      <td><a href="/">link</a></td> 
      <td><a href="/">link</a></td> 
      <td><a href="/">link</a></td> 
     </tr> 
    </table> 
</div> 

</div> 

</body> 

так что да, я не могу чтобы понять это. Пожалуйста, дайте мне знать, если вам нужны какие-либо другие части моего кода, чтобы выяснить, что случилось. Благодаря!

Answer 1

Название дивизиона над квадратными связями!

Answer 2

Я думаю, что проблема с вашим #title DIV, используя width: 98%; и z-index: 1; вызывает это, потому что, когда вы пытаетесь навести a elemnts в #square DIV, в реальности вы наведя #title DIV, потому что он имеет ширину 98% и a z-index: 1;, поэтому он покрывает квадратный div.

Как вы можете видеть на следующем снимке экрана:

Попытка удалить эти два атрибута из вашего название сНу CSS.