jQuery click issue with a span styled to look like a button - html

Question

Context
I've this buttons:
I detect when the user is clicking with jQuery .click().
But it works only if the user clicks on the text ("imdb" / "rottenTomatoes").
If the user clicks on the blue of button, jQuery detects nothing.
You can try on http://promobluray.fr.
Questions
What is the problem?
How to get this to work like a button?
Code
html:
<span class="rating">
<span class="rating-btn imdb active">imdb</span>
<span class="rating-btn rt">rottenTomatoes</span>
</span>​
css:
.rating {
padding: 14px;
}
.rating-btn {
display: inline-block;
margin-top: 24px;
padding: 4px;
position: relative;
font-family: 'Open Sans',sans-serif;
font-size: 12px;
text-decoration: none;
color: white;
cursor: pointer;
background-image: -o-linear-gradient(bottom,#2CA0CA 0,#08C 100%);
background-image: -moz-linear-gradient(bottom,#2CA0CA 0,#08C 100%);
background-image: -webkit-linear-gradient(bottom,#2CA0CA 0,#08C 100%);
background-image: -ms-linear-gradient(bottom,#2CA0CA 0,#08C 100%);
background-image: linear-gradient(bottom,#2CA0CA 0,#08C 100%);
-webkit-box-shadow: inset 0 1px 0 #7fd2f1,0px 6px 0 #156785;
-moz-box-shadow: inset 0 1px 0 #7fd2f1,0px 6px 0 #156785;
box-shadow: inset 0 1px 0 #7fd2f1,0px 6px 0 #156785;
border-radius: 5px;
}
.rating-btn::before {
background-color: #072239;
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 4px;
left: -2px;
top: 5px;
z-index: -1;
border-radius: 6px;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
}
.active {
background: #2CA0CA;
-webkit-box-shadow: inset 0 1px 0 #7fd2f1,inset 0 -1px 0 #156785;
-moz-box-shadow: inset 0 1px 0 #7fd2f1,inset 0 -1px 0 #156785;
box-shadow: inset 0 1px 0 #7fd2f1,inset 0 -1px 0 #156785;
top: 7px;
cursor: default;
}
.imdb {
margin-right: 5px;
}
jquery:
$('.rating-btn').click(function() { ... });
​

Answer 1

You could try to increase the padding of the button so that the <span> matches the dimension of the image, but i think that the best solution is to change your markup and actually use <button>

Answer 2

It's seems to work in the latest versions of FF and IE, but not Chrome, Opera and Safari(win). I would suggest adding display:block; to .rating-btn styles to see what that does.
Alternatively, actually use buttons and style those how you want.

Answer 3

Use parent to attach handler
$('.rating:has(.rating-btn)').click(function() { ... });