Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 295
  • Last Modified:

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

0
hubfub
Asked:
hubfub
  • 8
  • 4
  • 3
  • +1
2 Solutions
 
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 8
  • 4
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now