asked on

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

coldfusionwebdev

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>

hubfub

ASKER

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?

coldfusionwebdev

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>

hubfub

ASKER

I would prefer to just use a button tag if possible - is there to no way to change the formatting of the <button> itself?

jhp333

Try adding "font-family:Arial;"

a.big-button, button.big-button {
font-family:Arial;
...
...
}

hubfub

ASKER

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?

Morrisproject

Looks fine in FF to me now

hubfub

ASKER

What? no on http://pickyourquote.com/jobs/new

there is still a gap in the <button> tag

Morrisproject

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

Morrisproject

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;
}

hubfub

ASKER

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?

ASKER CERTIFIED SOLUTION

jhp333

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hubfub

ASKER

is there a way to fix this with css?

jhp333

"Do I need to to have a separate CSS file for Chrome and IE to change the spacings?"
Yes. I think so.

hubfub