Question

On Firefox, my css-styled buttons (rounded, with tiny icon before the button text) look fine visually, but nothing happens when you click… it’s like the a tag isn’t there?

my html:

<button class='xbutton' type='button'>
  <a href="/nextpage"><img alt="Next step" src="/icons/tick.png" /> Next page</a>
</button>

my css:

button.xbutton{
  padding:5px 10px 5px 7px; 
  line-height:17px; 
}

button.xbutton {
  background: #edeeed url("images/button-background.png") top;
  border: 1px solid #c3c4ba;
  font-family: helvetica, arial, sans-serif;
  font-weight: normal;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

button.xbutton a:link, button.xbutton a:visited{
  font-family: helvetica, arial, sans-serif;
  font-weight: lighter;
    font-size: 18px;
    color: #000;
    text-decoration:none;
}

button.xbutton:link, button.xbutton:visited, button.xbutton:hover, button.xbutton:active {
  font-weight: normal;
  background: #edeeed url("images/button-background.png") top;
}


button.xbutton:active {
  background: #eaeaea url("images/button-background-active.png") top;
  outline: none;
  margin-top: 1px;
  margin-bottom: -1px;
}

Answer 1

Well, it’s invalid HTML for one thing. It cannot contain an anchor. The button is submitting the form but you are trying to get it to jump to the hyperlink at the same time. You can’t do both.