0

I have a <textarea> inside the <body>. I have applied the following CSS rules:

body {
    font-family: sans-serif;
    font-size: 16px;
}
textarea {
    font-family: monospace;
    /* font-family: "Courier New", monospace; */
}

Here's what it looks like in Firefox 31.0:

Imgur

You can see the result in this JSFiddle. By inspecting the <textarea> with Firebug we can see it does not inherit the <body>'s font-size, but sets it instead to 13px. (0.8em?)

Imgur

However, if I uncomment the second font-family declaration, strange things happen.

Imgur

Now the <textarea> seems to inherit <body>'s font-size, even though I didn't change it manually.

Finally, in both cases, Firebug shows that the font-size: 16px of <body> is overridden, even though I didn't find any browser stylesheets there that override it.

Imgur

This does not seem to occur in Internet Explorer 11 or Chrome 34.

The problem is easily fixed by setting font-size: 0.8em to all <textarea>s, but the cause bothers me a bit.

What may be the cause of this? A bug in Firefox, possibly?

PurkkaKoodari
  • 6,703
  • 6
  • 37
  • 58
  • 1
    possible duplicate of [Why – Paulie_D Jul 31 '14 at 14:19
  • @Paulie_D Don't think so; I know the elements don't inherit said properties automatically. – PurkkaKoodari Jul 31 '14 at 15:16
  • @Pietu1998 You should be able to use the inspector to see where the font is being changed. It should point to the `textarea` due to the same issue Paulie_D linked – Zach Saucier Jul 31 '14 at 15:23
  • @ZachSaucier [Here](http://pastebin.com/5UkU7t8R) are all the rules that apply to the working ` – PurkkaKoodari Jul 31 '14 at 15:32

0 Answers0