I have two buttons set up as background images with text floating over them. I need to postion the text in a specific area of each button so it can be easily read. However I'm not able to move the text high enough on either button. It's about 25 pixels from the top of each button, even though I have the margin top set at 0. I want to move it higher. The images are 150 x 150. I need the text about 15 pixels from the top and I can't figure out what is preventing it from moving higher.
PS. the left margin of 24px is to move it away from left side of the page. The 2nd button has less space (on background) so I didn't use line-height on that one.
Can anyone see anything wrong with my code?
CSS:
.button-estimate a:link, .button-estimate a:visited { color: #000000; }
.button-estimate a:hover, .button-estimate a:active { color: #666666; }
.button-service a:link, .button-service a:visited { color: #000000; }
.button-servicea:hover, .button-service a:active { color: #666666; }
.button-estimate {
height:150px; width:150px;
background: url(images/estimate-button.gif) no-repeat; }
.button-service {
height:150px; width:150px;
background: url(images/service-button.gif) no-repeat; }
HTML:
<div class="button-estimate" style="margin:0 0 0 24px;">
<a href="free_estimate.htm"
style="font-size:14px;position:relative;top:1px;left:77px;
line-height:18px;padding:1px 2px 45px 55px;">
<br><b>Get a<br>FREE<br>ESTIMATE</b></a>
</div><br>
<div class="button-service" style="text-align:center;margin:0 0 0 24px;">
<a href="service_request.htm"
style="font-size:14px;">
<br><b>Request a<br>Service Call</b></a>
</div>
