I have a page where the UL is set to padding-left: 40px and I can't find where it is being set. In firebug it shows in 'computed' but isn't in the inherited styles list. I've tried removing the jquery in case it was set in js. I've removing the css - it's still there. I've set a breakpoint on attribute change - nothing.
Setting padding-left:0px doesn't fix IE7
Is there a plugin or some better way of inspecting applied css rules?
It's probably a browser default. If it's not in firebug's style tab, it's being applied by the browser itself.
To get Firebug to show user-agent defined CSS, click on the style tab drop-down and click "Show User Agent CSS" (thanks Gerben).
You can override styles that are set by the user-agent, simply by defining the style attribute for that element:
ul{
padding-left:20px;
}
Note that IE7 uses margin instead of padding as the default style for lists.
You can 'reset' all user-agent defined rules using something like Yahoo's reset stylesheet.
You can also 'normalise' the style applied to a page. This means overriding user-agent defined styles so that all browsers use a standard style. I personally prefer this method over 'resetting' the CSS and having to explicitly define CSS rules for everything. It's easier and takes up less space. Try this library.
That padding-left on ul is coming from the user agent stylesheet.
You can remove it with:
ul {
padding-left: 0;
margin-left: 0
}
Firebug is already the best Firefox plugin for this sort of task. You just need to enable this option:
Related
Is there a way to reproduce that but using additional css rules ?
My specific problem is how to disable a framework rule (that i cannot modify or edit) using additional css the same way firefox and chrome dev tools do.
What you might mean is the CSS unset or inherit keyword. By that, you can rule out CSS-properties assigned from other CSS sources (that probably aren't your own, e.g. coming from some theme files). unset makes it as if it wasn't set in the first place while inherit makes it inherit the parent's property.
Then just define the selector you're targeting and switch off a certain CSS property, e.g.:
.foo .bar {
font-family: unset;
}
You might have to enforce that with !important in case your selector is less powerful than some other.
Disabling code in css while leaving it in place for possible later use is done by commenting it out. All code between /* and */ will not be used.
/* .foo {
display:block;
} */
I have a popup that comes up over a blanket div that greys out the entire screen, but I don't like its positioning. So I tried to manually enter left: and top: elements into my CSS, but when I look at Chrome's console, there's this element.style {} that's overriding my code.
I've searched my CSS file for element.style and for 597px and 794px and I don't get hits on any of them.
What is this, and why does it have the values that it has?
element.style is a part of your browser devtools that indicates the inline style of the element which has a higher specificity value than any CSS selectors.
That inline styles may be added by a JavaScript code, if so, you can override that declarations by using !important keyword within your stylesheet (e.g. left: 610px !important).
element.style refers to inline styles on the dom element. For example:
<p style="color:#cc0000;">Foo</p>
the color of that paragraph would show up under element.style.
You can fix with your css by doing this:
#popUpDiv[style]{
left:610px !important;
top:0px !important;
}
HTH
-Ted
That's probably manipulated and set by javascript (either that or you edited the element.style{} rule yourselves on the developer tools console).
Look for javascript code that changes the display, top and left properties of #popupDiv
It is the style that you have in the HTML file.
try to delete or change the style in HTML.
I know this might sound like a strange question but I actually need to override a CSS reset file with the browser defaults (so the other way around than normal).
So when my reset.css states
li{
padding: 0;
}
I want to override that with the browser defaults.
Setting
li{
padding: auto !important;
}
doesn't work though.
Is there a way to do this?
The default stylesheets are different from browser to browser and from version to version. You can apply the browser's default stylesheet by using the respective CSS files:
Mozilla's default CSS
WebKit's default CSS
Opera's default CSS
IE9's default CSS
The much simpler solution might be to just remove the reset styles.
You can look up individual properties and set those as needed. This is very common in CSS but you might also use the "initial" value to do the same thing implicitly and with less effort.
For example,
h1 {
color: initial;
}
I've been using Chrome for a long time now and I've never (well not that I can recall) come across CSS definitions in the Style panel that are faded. The selector hasn't been defined else where.
Example:
(Edit: Just to be clear, I'm not referring to the user agent stylesheet)
I can't figure out why it is faded and what this means. The definition appears to be editable but any changes to the values do not persist (i.e. as soon as I click off, it reverts back to original value) and has no effect on the web page.
I couldn't find any reference to this in the documentation for the tool. Can any of you kind folk shed any light on this?
Rules that are faded are not applied to the element.
Take a look at this example
<!-- HTML -->
<div>
<span>Test</span>
</div>
/* CSS */
div {
color: #F0F;
margin: 15px;
stroke: #FFF;
float: left;
}
If you open dev tools, you will notice that margin and float are faded, color and stroke are not. That is because span element inherited style rules from its parent, but only color and stroke rules are inheritable.
The "faded" styles are ones that are not applied to the selected tag. So in your screenshot, you have an h1 rule which is normal colored -- that one is applied to whatever element you have selected -- and you have an .SubHeader h1 rule that is not being applied to the selected element.
You'll sometimes see this if you dynamically add a CSS rule (the + button in the chrome dev tools) but modify the selector so it doesn't apply to whichever element you have selected.
It means that the rule has been inherited:
http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style
These are the stylesheets that are applied automatically by the browser.
You can see this by the description: user agent stylesheets.
You can disable this in the setting in the lower right corner by checking Show user agent styles. Now the styles won't be shown in your CSS panel (but are still being applied!)
EDIT:
i misread your question, the dev doc says the following about dimmed rules:
Note: If you edit the selector so that it will not match the selected element, the rule will turn dimmed and obviously, will not be applied to the element. You should rarely need to do this.
Your screenshot looks like this could have been the case.
I am using Joomla 1.5.
i am having a page where a cSS has been added for the title
which is in <strong></strong>
I firebug it , it appears as
element.style {
color:#666666;
}
i dont know of from where it comes from..
but i am having a css applied for the same tag with other color. but it disappeared.
How to remove the element.style globally..
It is possible to override inline styles from an external stylesheet
strong[style] { color: blue !important; }
This works in most major browsers, Chrome, Safari, Firefox, IE8
It doesn't work (to my knowledge) in IE6 / IE7
Hope this helps.
This code comes from HTML and not from your CSS.
This HTML with generate your element.style:
<strong style="color:#666666;">Just text</strong>
Element.style, as the name says, its the style defined on element and there is no way to override it. If you do not want that color in that element you must remove/change it on html.
It seems it is not always set in HTML. In My case the element.style is empty:
element.style {
}
It is not set in any css and it is not set in any html source.
I dont't know where else I should look.
Inline styles are generated from HTML or (more often these days) javascript applying styles after the page had loaded.
Jquery is often a culprit of this, performing animations using css applied directly on the element that overrides your stylesheet.
For instance you may show, then hide a div, leaving a 'display:none' on the element that overrides any naturally cascading CSS that precedes it. This comes up often when you are mixing CSS transitions and media queries with javascript.
Check your JavaScript for any instances of applied styles.
Try using a callback function on the animation to clear styles:
$(this).css( "display", "" );