CODEWITHSUNDEEP
cssfirefoxsafarifont-size
Gil Dawson
Gil Dawson

Reputation: 45

CSS body font works on fiddle, why not Safari nor Firefox?

I'm learning CSS, and I haven't figured out why my "body {font-size...}" parameter does not seem to work inside a table tag.

The construct that I am after works fine on fiddle; however, when I put it all together into an HTML file...

<html>
<head>
<style>
body {font-size:80%; font-family: Courier, monospace}
</style>
</head>
<body>
<p>This text is outside the table.</p>
<table>
<caption>Inside</caption>
<tr><th>Inside</th></tr>
<tr><td>Inside</td></tr>
</table>
<p>Outside</p>
</body>
</html>

...both Safari V11.0 and Firefox V56.0 in OSX 11.6 render the text outside the table at 80%, which I expected, but the text inside the table is rendered at 100%:

Both Safari and Firefox render the above HTML the same

The "font-style" parameter is clearly working: if I remove it, the table contents are rendered in some proportional font.

If I use instead the font shorthand...

body {font:80% Courier, monospace}

...I get the same results.

Any suggestions for what I yet need to learn?

--Gil

Upvotes: 1

Views: 39

Answers (1)

Alohci
Alohci

Reputation: 83051

From the HTML 5 spec, Rendering section

In quirks mode, the following rules are also expected to apply:

@namespace url(http://www.w3.org/1999/xhtml);


table {
  font-weight: initial;
  font-style: initial;
  font-variant: initial;
  font-size: initial;
  line-height: initial;
  white-space: initial;
  text-align: initial;
}

Your page has no doctype, so it is in quirks mode, and therefore font-size (among the other font settings) for the table is being reset. Fiddles always use standards mode and therefore don't reset the font-size.

Add <!DOCTYPE html> to the top of your file.

Upvotes: 1

Related Questions