When I use Chrome Developer Tool to inspect an element, the height property is greyed out. From here
https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/#live-edit-a-do-node
it means i can't edit it.
But my question is why I can't edit it?
And how can I find out which style in style set this property? With other properties, I can expand it? but for this greyed out one? I can't expand it.
This is typically caused by the user agent style-sheet. You can override this usually by reordering your CSS or with a CSS normalizer (like normalize.css or reset.css, though these can add unnecessary bloat to your code if you don't need all of it).
It is important to note the order in which your style-sheets are invoked because CSS is by definition, cascading and the lowest definitions will take precedence.
In brute force situations, and only when there are no other clear solutions, you can use !important declarations.
Related
I want to center a div in the middle of the screen. That's why I am overriding some CSS rules. I wrote the rules again and set !important. (Please see the printscreen. The discussed rules are marked in red.)
As you can see the old rules are crossed out now but it still doesn't work. It only works when I manually uncheck the rules. (Yellow Checkbox on the left)
I checked it out in Firefox and the overridden rules are not crossed. This means the issue is probably related to the override.
What is the difference and how can I fix that?
Everything that's checked is active; all things are checked by default when you open the inspector and you can uncheck individual property-value pairs to temporarily disable them, either until you refresh or check the box again.
Everything that's crossed out is something that's currently being overwritten by another property-value pair somewhere else, either in the same selector or in another selector somewhere. It is being overwritten because a value is either the same but written second (like a shorthand property used after a specific one), or it could be overwritten because there is a more specific selector somewhere with the exact same property somewhere.
Safari/Chrome Developer Tools indicate that a CSS rule is overridden by something else by striking it through, as shown in the image.
Sometimes I find myself in a situation where I can not figure out from the CSS files what causes this rule to be ignored. But surely Safari itself must know as it strikes it through.
Is there a way to know what overrides such a rule?
Look at the one which isn't striked out, higher up on the list.
Alternatively, view the computed styles. They will be the definitive applied styles.
When you inspect an element, you can show the 'box'. Just bottom of that, you have a 'filter' which should show you every properties being applied to your element.
If you click on a property, it will give you the file and the line number.
Developer Tools will list all rules for an element. Just read through all the CSS rules that apply, and check for a non-struck-through one with the same name.
Go to Elements >> Computed and you'll get the stylesheet that defines the rule you're looking for.
Go to the Computed tab of Chrome Developer tools. Find wanted property and expand details.
I am fiddling with the looks of a page from our web application. I need to make lots of small changes quickly to judge the effect, and the developer tools give me the functionality I need, as I'm editing the CSS directly in the element inspector.
However, there is a table on this page, which was created by some JavaScript library. The library inserts style="width:1024px" directly in the <table> tag. I need to change this width to make it 100% of the parent width, but it doesn't work.
Deleting the style attribute from the HTML without reloading the page does not change the width. Setting a new width in the stylesheet does not work because the inline CSS supersedes it. Reloading the page overwrites my changes made in the element inspector.
I cannot get into the code and change the setting used for the library (I assume it allows the developer to define a constant width and does not do it by itself). What options do I have to see the table at the width I need without reprogramming the whole thing?
If you really can't remove the inline style you can override it adding the !important keyword on your css style.
like that
table {
width: 100% !important;
}
I found out that it indeed works when I change the inline tag directly from style="width:1024px" to style="width:100%".
My mistake had been to first delete the complete inline tag, then write it back again with the new value. It seemed to not "get it" that there has been a change.
I've looked in Firebug but can't find why a CSS background property is being cancelled out. I've looked if there is a more specific rule but nothing. Please find the image snippet, as follows:
Maybe somebody has a suggestion?
Firebug will make you think a shorthand property like background or margin (maybe font) was cancelled out when in fact only one property was modified by a later/more specific rule
Use the Computed tab (close to the Style one) to see what's going on.
For each individual property, you'll be able to see which one is more specific and which ones were defined somehow but are cancelled out for real.
It may be a rule with !important modifier for example (meh) or usually a margin-top over a margin and the 3 other properties still with the values set by margin.
Well, this is pretty straightforward. If Chrome's Developer Tools is showing me that a style is overridden, how to see what CSS rule is overriding it?
I want to know if is there anything like "Show me what overrides this".
OBS: Please, don't point me to Firebug.
Use the Computed Style panel of the element inspector. Expand the property of interest to see the list of applicable rules, and which one won.
You can simply look at the ones with the same name which aren't striked out, remember the listing is by importance.
Or you can view the computed styles. They will be the actually applied styles.
crtrl + shift + c and inspect the element. Then find the style without a line through it, in the box in the down right corner.
the override is in most cases at the top (and without a line through it, as this style is the "winning" one).