Button CSS formatting

please go to http://pickyourquote.com/

halfway down the page there is a "Create Account" button which is created using the following:
<div class="clearfix button-link"><a href="http://pickyourquote.com/signup" class="big-button"><span>Create Account</span></a></div>

now this looks fine on all browsers.

When you go to http://pickyourquote.com/jobs/new however, there is a button link down the bottom which does not look right in Firefox or Safari, the font looks a bit weird compared to the "Create Account" button and also there is a weird white spacing.
Code for the button is: <div class="clearfix button-link"><button class="big-button" type="submit"><span>Continue</span></button>

CSS code is attached

How do I get the <button> to look exactly the same as the <a>?
a.big-button, button.big-button {
background-position: right -30px;
color:#FFF;
float:left;
font-size:14px;
height:34px;
font-weight:700;
margin-right:6px;
padding:0 13px 0 0;
text-decoration:none;
}

a.big-button span, button.big-button span {
float:left;
background-position: left -30px;
line-height:14px;
padding:10px 0 10px 13px;
}

button.big-button, button.big-button span  {
border: 0;
cursor: pointer;
float: right;
}

a.big-button:hover, button.big-button:hover{
background-position: right -64px;
}

a.big-button:hover span, button.big-button:hover span {
background-position: left -64px;
}

Open in new window

LVL 1
hubfubAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

coldfusionwebdevCommented:
Change the html to this:
<button type="submit" class="big-button" style="padding:0 8px 0 0;"><span style="margin-top:-3px;">Continue</span></button>
0
hubfubAuthor Commented:
that worked, but not it's not aligned properly anymore in Chrome or IE

Also, this hasnt addressed the fact that the font still looks really weird compared to the <a> tag

Is there some sort of default formatting that the <button> tag has that I have to get rid of with css?
0
coldfusionwebdevCommented:
How about change the html to this:
<a href="#" class="big-button" type="submit"><span id="continueButton">Continue</span></a>

And, add this javascript at the top of the html file to use jQuery to submit the form when this "button/link" is clicked like this:

<script type="text/javascript">

 $(document).ready(function() {
    $('#continueButton').click(function() {
       $('#new_job').submit();
    });
});        
</script>

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

hubfubAuthor Commented:
I would prefer to just use a button tag if possible - is there to no way to change the formatting of the <button> itself?
0
jhp333Commented:
Try adding "font-family:Arial;"

a.big-button, button.big-button {
font-family:Arial;
...
...
}
0
hubfubAuthor Commented:
ok that has 50% fixed it

now the font looks right but the spacing is still weird only on firefox and safari.. works fine in chrome and IE... what the?
0
MorrisprojectCommented:
Looks fine in FF to me now
0
hubfubAuthor Commented:
What? no on  http://pickyourquote.com/jobs/new

there is still a gap in the <button> tag
0
MorrisprojectCommented:
right.

under this section:
a.big-button, button.big-button
change the background-position to: right -28px
change height to: 36px
change padding to: 0 10px 0 0;

done, viola
0
MorrisprojectCommented:
or copy this ::

a.big-button, button.big-button {
background-position:right -28px;
color:#FFFFFF;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
font-weight:700;
height:36px;
line-height:14px;
margin-right:6px;
padding:0 10px 0 0;
text-decoration:none;
}
0
hubfubAuthor Commented:
Thanks, I have made the changes and it looks fine in FF

BUT not it does not work correctly in Chrome or IE

Do I need to to have a seperate CSS file for Chrome and IE to change the spacings?

why are the browsers treating this so differently?
0
jhp333Commented:
When you push a button on a web browser, you see some effect that represents the button is being pushed. Each browser's effect is slightly different from each other. That's why they handle the background image (of the span) differently.
The method you used in your web page to show graphical button is not standard. It show left part of the button image with <span> and right part with <button> or <a>, so that the same image can be used for various width of buttons.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
hubfubAuthor Commented:
is there a way to fix this with css?
0
jhp333Commented:
"Do I need to to have a separate CSS file for Chrome and IE to change the spacings?"
Yes. I think so.
0
hubfubAuthor Commented:
How do i create a statement for a special CSS file for chrome? I know how to do it for IE
0
hubfubAuthor Commented:
not solved completely
0
MorrisprojectCommented:
Did I not solve this?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.