User agent stylesheet overriding my table style? Twitter Bootstrap
I actually figured this out myself. I had the <!DOCTYPE html>
tag wrongly written. So if you have this problem make sure the doctype declaration is correct!
user agent stylesheet override my own styles
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.)
How to stop user agent stylesheets from overriding my css
The "problem" here is that there is actually no input
style in the author stylesheet (see the spec for more info), and therefore the style that is defined in the user agent stylesheet is used.
The (relevant) user agent rule (on chrome) is:
input, input[type="password"], input[type="search"] {
cursor: auto;
}
You can achieve what you want in a couple ways:
- Create a css class that selects the input directly, for example
- using another css class, or
- selecting the input within the already-defined class,
- etc
- Explicitly setting inheritance behavior for the cursor style on all inputs
For (1):
<style>
.a, .a input {
cursor: pointer;
}
</style>
For (2):
<style>
input {
cursor: inherit;
}
.a {
cursor: pointer;
}
</style>
User agent stylesheet overwriting site styles
Anchors have a higher priority than any of the container elements (divs, spans, etc...), say .nav
is your container element and you've set the color to gray, the color of anchors would still be the default blueish, since it has a higher priority. To overcome this, you need to define for example .nav a
or even the sitewide a
in your basic.css
file.
EDIT
According to your new edit, you need to define footer a
.
Display property overridden by User Agent Stylesheet
Css:
.hidden {
display: none
}
is the correct syntax.
What is a user agent stylesheet?
What are the target browsers? Different browsers set different default CSS rules. Try including a CSS reset, such as the meyerweb CSS reset or normalize.css, to remove those defaults. Google "CSS reset vs normalize" to see the differences.
Related Topics
Make Input Value Uppercase in CSS Without Affecting the Placeholder
Font-Weight Is Not Working Properly
How to Set Keyframes Name in Less
Why Are Not All Flexbox Elements Behaving Like Flexbox Divs
Jqueryui Slider: Absolutely Positioned Element & Parent Container Height
Blurry Text on Transform:Rotate in Chrome
Make Image Appear on Link Hover CSS
IE9 Bug with Increased Font-Size of CSS Content
Controlling CSS Cube Rotation(Transform) and Extracting Values from 3D Matrix
Get Color Attribute from the Styles Table
Using Bootstrap Icons with Button_To "Delete" in Rails 3
How to Assign Custom CSS Class to Arbitrary Arbitrary Rows of H:Datatable
CSS Selector for Class Descendant Within a Class
Using Createmuitheme to Override Default Styles on Div'S, P'S, Body