Why is my button not fully lining up? - html

Question

I've got a button posted here:
http://buttontest.raptorshop.com/
But for some reason, it isn't entirely lining up. What can cause this?
I tried changing line height, padding, etc.
Here's the CSS code I have:
a.gbutton {
background: transparent url('buttonside.png') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 82px;
margin-right: 6px;
padding-right: 46px; /* sliding doors padding */
text-decoration: none;
}
a.gbutton span {
background: transparent url('buttonmain.png') no-repeat;
display: block;
line-height: 68px;
padding: 5px 0 5px 18px;
}
I am modifying this from a tutorial I found online, and perfect CSS placement has always been a difficult item for me.

Answer 1

The sliding door technique works because extending a rectangle won't change its look. But extending a ellipse will, so your code won't work as you expect.
Here is the best I could get:
a.gbutton {
background: transparent url('buttonside.png') no-repeat scroll right top;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 82px;
margin-right: 10px;
padding-right: 51px;
text-decoration: none;
}
a.gbutton span {
background: transparent url('buttonmain.png') no-repeat left top;
background-size: 100% auto;
display: block;
line-height: 68px;
padding: 5px 0 5px 18px;
height: 100%;
width: 100%;
}
Update
Just use a single image and specify the CSS:
background-size: 100% auto;