Menu
EDIT*** In what instances can user agent styles override custom CSS?
I have a few styles set on an element on a page of mine, it seems that the user agent stylesheet override my definitions.
It is happening in Chrome Version 39.0.2171.95 m, Firefox 34.0.5, but not in IE 11.
I know I don't have any direct styles on that element, but it is my understanding that the user agent stylesheet ONLY takes over if there are absolutely no styles for a particular element. Do inherited styles not count towards that?
678
The answer to the general question is that only property settings set on an element itself are taken into account when deciding which style setting “wins”. For example, if we have just one style sheet that sets font-size: 18px on the body element and another style sheet that set font-size: 9px on all p elements, then the font size of p elements is 9px, no matter what the origins of the style sheets are, e.g. whether the latter is just a browser default style sheet. Inheritance plays no role here. This is all described in section Assigning property values, Cascading, and Inheritance of the CSS 2.1 spec.
Inheritance is considered only after the above “fight” has been resolved. Only then are inheritable properties inherited by elements that have them not set at all.
The specific question does not provide specific code, but it can be inferred that you have something like this:
<style>
body { font-size: 12px; }
</style>
<table>
<tr><td>foo
</table>
bar
Normally this causes both “foo” and “bar” to appear in 12px size. The table cell inherits the size from the table row, which inherits it from the tbody element, which inherits it from the table, which inherits it from the body.
However, in your case, this chain is broken. The reason is that the browser style sheet has
table { font-size: medium }
which in practice tends to mean 16px. Now the table element has the property set, so the cell inherits that value.
Browsers do not normally have such a rule in their style sheets. However, in Quirks Mode, most browsers apply the rule. This means that font size is not inherited from body into tables. This reflects bugs (or oddities) in very old versions of IE and lets legacy page be rendered as they used to be.
If you have unintentionally caused Quirks Mode and do not need it for other purposes, just slap
<!DOCTYPE html>
at the very start of your document. But beware that old pages may get messed up in different ways, if they have been designed in testing conditions that correspond to Quirks Mode.
Alternatively, add the following rule into your style sheet:
table { font-size: 100% }
This means that a table gets the font size of its parent. (Like in inheritance, but safer.)
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
