In Firebug, How to Tell What Is Overriding a Style

In Firebug, how to tell what is overriding a style?

What ever styles are above the crossed out styles are usually overriding it. If that is not the case, start clicking the disable style icons and see where the issue is.

Chrome Developer Tools: How to find out what is overriding a CSS rule?

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.

How can I tell which style is overriding another?

Margins can be effectively overridden by contained/containing elements, due to "margin collapse". Try inspecting the children and possibly ancestors to see if this is what's happening.

Browser Not Rendering CSS ID Style (Override Shows Correct in Firebug)

Your problem is that you have visited the link.

Test this yourself by clearing your history and refreshing your page. Your link will be red again. Click on it, and it will be grey.

The colour is red for :link which is fine until you visit it. Once that happens, since you have no :visited rules, it grabs the styling from .tune-in a instead.

If you remove :link from a#nowplaying:link it will remain red even after visiting the link.

Control style overridden

Your ComboBox may be inheriting it's styling from the <div> it is contained in, or from a div higher than that. Since you have not specified a 'class' or 'ID' attribute for the div that it is contained within, that div may be retrieving style from your CSS file if you have something like:

div
{
  height: 21px;
  margin: 0px;
  padding: 0px;
  width: 21px;
}

To force your ComboBox to take independent styling though you may use the asp style attribute like so:

<asp:ComboBox ID="cboCounty" runat="server" MaxLength="0" 
AutoCompleteMode="SuggestAppend" style="margin: 0;padding: 0;height: 21px;width: 21px;">
</asp:ComboBox>

That should be the highest priority over any other styling that may be interfering in your application. Although considered improper programming practice it may help you narrow down the issue.

Cheers, Eric

EDIT I should also mention that your CSS code is interpreted in order from the most specific to least specific tag definitions. Ex, div.menu is more specific than div, this may be occurring somewhere else in your style-sheet.

This is also a good article to look at describing inheritance. Hope this helps!

Find out why a CSS rule is disabled

They are not disabled. These entries have a strike through them to signify they have been reset or overwritten by a newer rule (one loaded after this style sheet for instance).

CSS styles are loaded in order of inclusion on the html page, with inline styles taking priority over CSS sheet definitions.

Firebug will show you which one has overwritten this one if you just review all CSS acting on that element. Just look for any other list-style-image: listed.

How to use Firebug to easily find which css file defines a particular style

Activate the style tab in the right panel "Style | Computed | Layout | DOM ". For every CSS rule, there will be a blue link "mystyles.css (line 22). You can quickly jump to a rule by activating Element Inspector (The box w/ mouse on the far left hand, hotkey is Ctrl + Shift + C. Highlighting over your element with Element Inspector (you can also click on it) will show you all the CSS rules that apply (or were overwritten).

---

Related Topics