0

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>
Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
Rhys Edwards
  • 771
  • 2
  • 14
  • 32

1 Answers1

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.

Community
  • 1
  • 1
tjdecke
  • 567
  • 4
  • 11