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?
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.
As pointed out by austin and Waterlink the Computed styles (or Computed in FF) tab can show the currently applied styles, and their origin.
However, the Styles tab is also very useful. Upon right-clicking "inspect" on an element, the Styles tab will show a Full list of all the active styles and overwritten styles related to the inspected element. (Shows them as they were written in the CSS. Not what is actually being rendered)
That way you can tell which styles were overwritten in which order. A style in your css could be overwritten from an inline style, user defined style, a later defined css file or a css rule of higher importance, or even a non-css-attribute such as width/height attributes directly on a HTML-element
The formatting shows the status for a style:
normal text = active
strike through = inactive since another style has overwritten it
greyed out = identifier not applied. ( If you are inspecting the Style of a <p> element and the css identifier is p, span , then the span identifer would be greyed out)
Example:
In this image, the color property of #post a is inactive. It has been overwritten by the color property in #cashieCatalog.
In the HTML tab of Firebug, you should see a panel on the right with tabs Style, Computed, Layout, and DOM. Select Computed. This will show you the "current" style being applied to the page.
If you expand a rule node, you should see a link on the right showing you which style sheet it is coming from, along with stylesheet rules that are being overridden.
Related
I am modifying an existing template to adapt some basic parameters such as colors etc.
I use Google Chrome development extension so I can right click on a particular element use Inspect option to see what CSS rules are being applied to that element.
Then I can override specific rules in my custom CSS file.
So far so good.
My question comes for certain rules, for example if I click on an input element, the border of that element changes color but I can not right click and inspect as the focus is lost and hence I can not see in Google Developer tools what rules are being applied to that element when the focus is in that element.
Which is the strategy to debug such cases?
You can right click on the element in the Chrome Inspector and there is a 'Force state...' context menu item.
Here is a video clip demonstrating how to do it. https://developers.google.com/web/updates/2015/05/triggering-of-pseudo-classes
I want to debug the tab index flow through a deployed webpage. The current css has outline:none on many of the input elements.
What is the best way, in chrome, to do a global css override, so that I can clearly see the selected/focused element while tabbing through the site?
Inspect the element on the page (right-click it and select "inspect"), right-click it in the elements tab, select ":focus" from the list, look in the styles tab (should already be open) for the style rule setting the outline:none rule, uncheck the checkbox next to all outline:none styles (you may need to scroll or uncheck them from multiple rules). This will allow you to see the default outline style in your browser without changing code on production. You will have to repeat these steps every time you open the page to test it.
Edit: Those steps should cover most cases that you need to do that. If you truly need a global rule, you can add that too by clicking the "+" icon in the styles tab and adding a rule similar to *:focus{outline:initial !important} or similar.
I started building a site using a bootstrap template, but I'm having a hard time figuring out how to tweak the css. For example, a table might stretch across the entire page. But when I use F12 to look at the css, I don't see anything related to a width property anywhere around the table. Is there a better way to determine what css is being applied or inherited?
You can use the Google Chrome element inspector. Right click on a div or any other page element, and then click "Inspect Element". From there you can view the CSS that is being applied to a specific element.
Check out this Chrome plugin called SnappySnippet. (Also, prepare to be amazed)
Have a look inside bootstrap.css file , there should be plenty of code and not every element has it's own separate css , some elements are defined together
If you use google dev tools (F12), the navigation tab will let you click on "Resources." When you click that, you can look at the scripts, stylesheets, see a list of images used, etc...
if you click the "magnifying glass" in Google dev tools (F12), you can hover over any element on the page. Click that element and on the right side, the CSS will be displayed. Usually the stylesheet is called out inside the css.
Maybe I'm just a Firebug newbie, or maybe there is some other better tool? But I'm trying to easily find which of several linked css files, defines a specific element's style.
For instance in a production environment I can pinpoint that a style named left-tab is being applied to a specific element, and it renders properly. In the development environment the same style is applied within the HTML, but is not being rendered the same way as in production.
The production and development environments each include 9 css files. I want to easily find which one defines the style left-tab. Using the CSS tab I can open and even (temporarily) edit each of these, but how do I search through these? Ctrl-F searches the HTML document itself, as opposed to the CSS contained within the Firebug pane.
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).
When you right click an element and click 'inspect element' the box in the bottom right will display CSS styles for that element, just above each one it tells you which CSS file it came from and what line.
We supply micro-site content to a client. They supply us with a HTML wrapper and we inject our content into it. I'm trying to debug an issue where our style sheet appears to be interfering with the style in their wrapper.
Normally I'd use firebug or IE Developer Toolbar to select the element and I can see which styles are being applied, which are being overridden and where they are coming from. But this particular problem only exists when I hover the mouse over a link. Specifically, the link shrinks a little bit.
Is there anything that I can use to see what the browser is doing with the styles when I hover the mouse over the link?
Right click on the element. Select 'inspect element'. In the firebug html window click on the tag you're interested in. Hover over the element in page. You should see the style change to e.g a:hover