I've inherited an .asp website and had to update the pages to relocate forms in tables to the sidebar.
It's worked fine on all but one page which stubbornly refuses to accept my css and is taking values from who knows where.
I've tried debugging in Firefox/Chrome and even written rules in the head of the page but to no avail. Is there a tool for identifying this kind of thing? I'm no slouch with css but this is baffling me. I don't want to resort to javascript to fix this as I see it as a fundamental issue.
Is there a way to find out where a css rule is coming from?
Press "Ctrl-F" and type "style." The window searches the code for that word. If you see a style tag in an HTML document, that document uses CSS. The code between the opening <style> tag and the closing </style> tag contains the CSS.
The specificity of a CSS rule depends on its selector. The more specific the CSS selector is, the higher is the precedence of the CSS property declarations inside the CSS rule owning the selector. In general terms, the more specifically (uniquely) a CSS selector targets an HTML element, the higher is its specificity.
You may use web inspector in Chrome.
Right click on failing element and select inspect element.
You should end up with web inspector window with two sections: left is html nodes tree and right is styles and properties of selected node. Failing element should be selected already.
Next you need to expand "Computed Style" tab and look for offending style.
When found, you'll see small triangle to the left of style definition - it is clickable. On click it should expand list of selectors that affects this style for this element. You'll see url to css for each of this. Bingo.
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