CSS-класс, ломающий ссылки

Question

Я использую кнопки CSS3 для сайта, над которым я работаю.Однако может показаться, что CSS, управляющий этими кнопками, разрушает ссылки, которые он стилизует.Если кто-то может указать, где я иду не так, это было бы очень признательно.

Кнопки управления CSS:

.button {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding:5px 15px;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}
.blue {
    color: #d9eef7;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#009DD1), to(#009DD1));
    background: -moz-linear-gradient(top,  #009DD1,  #009DD1);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
    background: #007ead;
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
    background: -moz-linear-gradient(top,  #0095cc,  #00678e);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
    color: #FFFFFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
    background: -moz-linear-gradient(top,  #0078a5,  #00adee);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

И ссылки обидные:

<div class="nav">
    <a href='http://www.twantrum.com/mild.html' target="_top" class='button blue'>Mild</a>
    <a href='http://www.twantrum.com/restrained.html' target="_top" class='button blue'>Restrained</a>
    <a href='http://www.twantrum.com/angry.html' target="_top" class='button blue'>Angry</a>
    <a href='http://www.twantrum.com/mel-gibson.html' target="_top" class='button blue'>Mel Gibson</a>
</div>

Answer 1

Нет ошибки в разметке, которую вы разместили.

Хотя, глядя на вашу страницу, я заметил этот раздел, который выдает ошибку:

<script type="text/javascript">
$(document).ready(function(){
   $('.button').click(function(){ return false; });
});
</script>

Почему это не работаетответ здесь: Каков эффект добавления 'return false' в прослушиватель событий щелчка?

Надеюсь, это поможет.