1

I've got a problem with some css. I have 2 buttons, one is an href and one is a form. The hover works on the form button but not on the href button.

.ims-button, .ims-button a:link, .ims-button a:visited {
    background-color: rgb(255, 204, 0);
    border: 1px solid #999;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #999999;
    font-family: Ubuntu, Arial, "Arial Unicode MS", Helvetica, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    padding: 5px;
    vertical-align: middle;
    margin-bottom: 4px;
    margin-left: 4px;
    color: #000000;
    text-decoration: none;
}
.ims-button:hover, a.ims-button:hover, .ims-button a:hover {
    background-color: rgb(255, 204, 0);
    border: 1px solid #999;
    border-radius: 5px;
    box-shadow: none;
    font-family: Ubuntu, Arial, "Arial Unicode MS", Helvetica, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    padding: 5px;
    margin: 4px 0 0 4px;
    vertical-align: middle;
}

I cannot see why the href isnt working.

The site: http://goo.gl/pl7DFR Once on the site, under the grey box with the photo in you can see the Add to cart link - click that and you'll see the 2 buttons - Checkout doesnt work, Add to Basket does...

Any ideas?

George Netu
  • 2,758
  • 4
  • 28
  • 49
Totally Tech IT
  • 77
  • 1
  • 2
  • 6
  • 2
    Please cut down on the amount of css you're posting here, and post the relevant html. Most people aren't going to follow your link and wade through your source code. – Teepeemm May 09 '15 at 19:11

1 Answers1

4

You're attempting to apply margin to an inline (the "a") element, which isn't possible. Change the checkout link to 

display: inline-block;

and you'll get quite a bit closer to what you're expecting.

See https://stackoverflow.com/a/5700058/2517689 for more information on inline behavior.

Community
  • 1
  • 1
Pete Scott
  • 1,516
  • 10
  • 10