csscss-cascade

CSS author class rule overriden by element browser native rule


font-size CSS rule defined by class rule (.dropdown-menu) was overridden by build-in browser element rule (table). How is that possible?

I work on Cockpit plugin that uses PatternFly styles. My label element (selected line in screenshot) has too large font-size that was inherited from indirect parent element table. The table surprisingly doesn't inherit value of property font-size from its parent elements (defined for div.dropdown in .dropdown definition) however it takes it directly from browser stylesheet. I wonder how is it possible, doesn't it violate CSS cascade - to use browser definition instead on inherit from parent element?

It works this way consistently in Chrome 51 and Firefox 46.

Dev tools screenshot

Here is simplified JsFiddle demo that seems to work correctly (i.e. differently).

According to w3schools font-size rule is inherited and according to css specification browser styles should have lower priority.


Solution

  • Check to see if you're document is in quirksmode, which could be causing the inheritance issue. If the document is in strict mode, this should not be occurring.