Why does Chrome use different fonts with the same CSS?

I have a span and an input element that share the same CSS definition for font. Why does Chrome use different fonts for them? How would I fix this issue?

My objective is to make them look exactly the same in IE9, Chrome and FF.


CSS definitions (FIXED), if they still matter.

* {
    font-family: Verdana,Helvetica,Arial,sans-serif; /* Moving here fixed it */
}
body {
    /*font-family: Verdana,Helvetica,Arial,sans-serif; -- This caused the issue*/
    font-size: .8em;
    margin: 0;
    padding: 0;
    color: #000;
}
.button 
{
    text-align:center;
    min-width:80px;
    display:inline-block;
    white-space:nowrap;
    background-color:#4A8CF6;
    color:#FFF;
    padding:4px;
    margin:1px;
    border:0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    font-size: .8em;
}

Solution

The problem was that the span elements inherited from my CSS definition for body and the input elements didn't. I had defined the font in my CSS with body { font-family:...; } like my computed results show and I thought that using display: inline-block; would force both of them to inherit the font from body but it did not.

The solution was to switch to using * { font-family:...; } for the font definitions. The button and clickable classes simply defined sizes and colors and such.

Answers


You have to literally specify input elements if you want them to have the same font like so:

/* Or input[type=submit] depending on your needs */
span, input { 
    font-family: Arial, sans-serif; /* Your font here */
}

Otherwise the browser uses the default values as your question shows. You're looking under Computed Styles which shows that Chrome has decided the values for you as you haven't specified them.


You should apply CSS reset rules in the beginning of your style sheet. Its purpose is to make all elements have the same look in all browser.

Examples:

http://developer.yahoo.com/yui/reset/

http://meyerweb.com/eric/tools/css/reset/

Related question which can be useful too: Best css reset


Need Your Help

Launch application Java

java eclipse jar launch

I made an application using bluetooth and so I had to use external libraries (bluecove). I am now looking to create a single executable to be able to give it to testers. I tested the executable JAR...

Alternative to passing userid & password through Java applet?

java php mysql security applet

The applet will help the user to create java class objects which will be sent to the PHP server, which will store the object as a blob in a MySQL database. The reverse should work too - reading the...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.