Why doesn't font-size propagate from div to table?

Question

I have a pretty simple document:

<html>

<body>
  <style type="text/css">
    div.main {
      font-size: smaller;
    }
  </style>
  <div class="main">
    Lorem ipsum dolor sit amet<br/>
    <span>Lorem ipsum dolor sit amet</span>
    <div>Lorem ipsum dolor sit amet</div>
    <table>
      <tbody>
        <tr>
          <td>Lorem ipsum dolor sit amet</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

Here's the rendering I get:

I have two questions:

Why does table not inherit the font-size from its parent div, unlike other elements?
What is the correct solution to this problem?

as you can see, if you run the snippet the font-size is the same for all ... so you have probably more CSS involved than the one you shared — Temani Afif, Apr 04 '19 at 23:50
I'm not seeing an issue. What browser/browser version are you running? — Dom, Apr 04 '19 at 23:50
It work well my browser. "Chrome ver 73.0.3683.86", Win 10 / 64 Bit // Could you be using an browser add-on or something? Because what you're saying is not valid. Or what is the device you are using? It can be very specific. — BOZ, Apr 04 '19 at 23:53
@TemaniAfif: I've tried it on both Chrome 70 and Firefox Nightly 62, both in incognito/private... I don't expect it's an extension but let me double check. (P.S. I see the same behavior when I run the snippet here as well, so I guess I don't see what you see.) — user541686, Apr 04 '19 at 23:54
Nope, same exact issue on Firefox 62.0.3 on a separate system, with zero add-ons. @Dom/BOZ — user541686, Apr 04 '19 at 23:55
@BOZ/etc.: Same issue on IE 11 in fact. I'm puzzled how you guys don't see this. — user541686, Apr 05 '19 at 00:00
@Mehrdad Can there be anything related to the device? Because this is very strange. Please decorate the content with a screenshot. But don't forget to select of the tag in the chrome console. — BOZ, Apr 05 '19 at 00:03
@TemaniAfif: Well obviously IE is on Windows... and the rest were on Windows too initially. Then I tried Firefox 62.0.3 on WSL and got the same thing. — user541686, Apr 05 '19 at 00:08
Same exact issue on a VM with Chrome 73.0.3683.103 in guest mode (no extensions etc.) in standard 96-DPI mode. Same thing on a remote desktop machine. I seriously don't think it's related to my device or OS guys. It's clearly a browser thing. For what it's worth I don't see the same behavior on my phone, so it seems to be a desktop browser thing. — user541686, Apr 05 '19 at 00:24
@Mehrdad It's interesting. The user agent style sheet has already defined a font size for `[fontsize:medium]`. In this case, does not use the size of the parent. But I don't understand why this is happening. The
font size is not set on my screen. So it carries the character of the parent. Also try opening the HTML instead of "localhost" in the browser and so test it. — BOZ, Apr 05 '19 at 00:31
@BOZ: I've done it with opening the file too. I've done every variant you can probably think of... I swear you're misdiagnosing the issue. Can you show me a screenshot of what you see when you open it as a file? — user541686, Apr 05 '19 at 00:32
@TemaniAfif: Correction -- I don't see the same thing with Run Code Snippet when I try it now, so I think I must've accidentally looked at the screenshot or something when I said I did earlier. It only happens when I actually load this HTML file itself. So I'm guessing you guys are not actually loading the file itself but telling me I'm wrong because you're clicking *Run code snippet* and seeing something different? i.e. it may in fact be that you have additional styles applied rather than me? — user541686, Apr 05 '19 at 00:33
ok, I see, quirks mode .. you are not adding the doctype at the top — Temani Afif, Apr 05 '19 at 00:37
@Mehrdad After so many tests and applications, it is clear that if the DOCUMENT type is not specified, the scanners can automatically add some ready-made styles. ` ` He was before me check duplicate :) But I first identified it: D — BOZ, Apr 05 '19 at 00:51
@BOZ: First or second, at least we figured it out. If I'm being honest I'm rather frustrated you guys kept telling me to test a million different things (I had already wasted enough time on this as-is) insisting that something must wrong on my end even to the point where that seemed borderline impossible. Did you not test any of the tests you were proposing yourself? This behavior seems pretty consistent across every browser and every OS... — user541686, Apr 05 '19 at 00:54
I actually wrote a nice answer. I couldn't send it :) | I'm so used to, I am automatically add it every time. That's why I've never met this before. But I tested too what I told you, it just took a while. But at least we solved the case. — BOZ, Apr 05 '19 at 00:59

score 0 · Answer 1 · answered Apr 05 '19 at 00:39

It says under 'user agent stylesheet' that you have font-size:medium for your tables. That is the default styling of your browser. So you are running a browser (or a mode within your browser) that is setting that style. It is not something from your .css definitions.

Why doesn't font-size propagate from div to table?

1 Answers1