CSS button class breaking links - html

Question

I'm using CSS3 buttons for a website I'm working on. However it would appear that the CSS controlling these buttons is breaking the links it styles. If anyone could point out where I am going wrong that would be greatly appreciated.
CSS controlling buttons:
.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');
}
And the offending links:
<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

There is no error in the markup you posted.
Looking at your page itself though, i noticed this section, which produces the error:
<script type="text/javascript">
$(document).ready(function(){
$('.button').click(function(){ return false; });
});
</script>
Why this does not work is answered here: What's the effect of adding 'return false' to a click event listener?
Hope it helps.