2

I have a css definiton for all my buttons as below. However my buttons looks strange in mozilla firefox. They look fine for all browsers except firfox mozilla. I could find why. can you check it.

FireFox:

enter image description here

Chrome

enter image description here

Html button

<button class="btn btnFB btnBig"  >Signin By Facebook </button>

Css Definition

.btn {
    display: inline-block;
    margin: 0;
    cursor: pointer;
    border: 1px solid #bbb;
    overflow: visible;
    padding: 7px 2px 7px 20px;
    font-size: 0.97em;
    font-weight: bold;
    vertical-align: middle;
    text-decoration: none;
    white-space: nowrap;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
    transition: all .15s linear;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0.35);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255,0.3)), to(rgba(255, 255, 255, 0)));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0));
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0));
    background-image: linear-gradient(top, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0));
}

button.btnFB{background-color: #3b5998;border-color: #3b5998;color: #FEF3E5;}
button.btnFB:hover{background-color: #4966A5;}
button.btnFB:active{background-color: #3b5998;}
button.btnBig{line-height: 1.33em;padding: 8px 12px 8px 30px;}

EDIT : The font family of my web site

body{
    font: normal 12px RobotoDraft,Roboto,'Helvetica Neue',arial,sans-serif;
    background-color: #F7F7F7;
    color: #262626;
}
Improve this question

4 Answers 4

Reset to default
3

When you do not set fonts on your page, each browser uses its default fonts. This may well mean that the font family used in button elements varies. It is typically Arial, but Firefox has different settings, e.g. MS Shell Dlg in my system (Win 7). You can check such issues using each browser’s Developer Tools.

There’s also a difference in font size. When you set font size to 0.97em, browsers multiply the parent element’s font size by 0.97 and may then round the result, even in different ways. When the basic font size is the typical default of 16px, IE uses 15.52px, Firefox uses the correct exact value 15.53px, and Chrome uses 16px (i.e. rounds to in integral number of pixels). This, combined with font family variation, causes small differences.

You can make the rendering more uniform by replacing font-size: 0.97em by

font-size: 1em;

and adding

font-family: Arial;

in the rule with the .btn selectors.

This does not remove all differences, since browsers render fonts in slightly different ways, and not all systems have Arial (many modern handheld devices don’t). Rendering in Firefox and Chrome on Win 7:

enter image description here

Regarding font family, you could use a downloadable font (web font), to get more consistent results. Doing so just for a few buttons might be overkill, but maybe you have other use for it too.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Since this is facebook button, i would had liked to use klavika but it gives different result for non-english letters. So I decied my buttons have the same font-family with my body. Furthermore, I set my button font-size 1em. but nothing changed. still in firefox it looks terrible
I don’t see what you mean by “terrible”. To me, the Chrome rendering (the lower one in the added screenshot) looks worse, because bolding is somewhat disproportionate. But this is a matter of taste, too, and it depends on rendering details we cannot control.
I think your answer is correct. When i set font-family: Arial; for my button it worked. as in your image also, bold meausures are different. why I can not use font: normal 12px RobotoDraft,Roboto,'Helvetica Neue',arial,sans-serif; for my buttons also?
Thank you for your detailed answer. The problem was my font-family. I did what you adviced. It is much better then what I did.
2

What is the font-family of your site ? This look like a font-familly issue. Not all browser display all font the same way. If you specified more then one, maybe firefox don't find one and fallback to another one.

Improve this answer

Comments

1

Default font used by Chrome is different to that used by Firefox. Hence it looks different.

You can find a lot of fonts on Google Fonts.

If still you didn't find one, try the Roboto font from Google's Material Design.

Improve this answer

Comments

0

I think this is a line-height issue. Try to add something like this: line-height: 1.5; See if that helps.

Improve this answer

1 Comment

no it did not help. BTW i changed em to px.. it worked little bit but in firefox, text in button are not exactly centered horizontally like in chrome or safari or ie

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.