I have a CSS file which is not written by me, but I have to change stuff. My problem is a line like this:
list-style-image: url("../images/pfeil.png");
The path to the image is correct, but it's not displayed. I used Firebug to check which styles are applied and I see the line is stroke through. According to the documentation, that means that it's overwritten by another rule.
Is there a way / tool to find out, which rule is overwriting the line above?
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.
Open your page in chrome, hit ctrl, shift I to open developers console. On the right, there should be an accordion thingy with one of the options being "Computed Style". Open that, click on show inherited, find the setting your concerned about, click the little arrow next to it and it should open up and tell you where the computed setting is coming from.
Let me know if that does it for you.
Related
I understand that if a sytle is overridden then it is crossed out in Google Chrome tools and then you can go to the Computed tab to see, which element has overridden the style.
Say I have some css like this:
.myClass
{
position:static;
top: 20px;
}
This is clearly wrong because the top attribute does not work with positions that are static. When I load the webpage in Google Chrome and press F12; the style appears under the styles tab as if it was applied to the webpage, which I find a little confusing.
Does Google Chrome (or any other browser/tool) tell you what the error is e.g. "cannot apply top to statically applied element" (like you get in Visual Studio when there is an error in your code e.g. NullPointerException).
A CSS class is a set of rules applicable to any element on your page that also can change during the live time of the page. As mentioned in Dais comment, properties are inherited and cascade down.
There is no reliable way to validate a set of CSS rules, because they all interplay each other and are about to change. Especially if you ask for a feature in your IDE like the NullPointerException hint this won't work, because CSS classes are composable and are JIT compiled. An IDE could not know beforehand which class are combined with other classes assigned to which elements in regards to the DOM tree at a specific app time state.
Mozilla Firefox has such a feature. It tells you why a rule isn't applied directly in the Inspector.
Is there a way to see exactly which declaration is affecting an element. Rather than looking at a million properties in the Firebug inspector, where depending on how many classes something is assigned may contain a lot of declarations that are lower precedence and therefore not applied. It can get lengthy to find which particular declaration is in fact affecting your element. I see long ignored declarations like this:
ul {
color: green;
}
"Computed style" will show you the end result of all the hierarchies, but not where the style derives from. Maybe I'm missing something simple. Thanks much!
JSBIN
Edit:
I've heard that I should be able to expand attributes in the Computed tag, however I don't see where that option is available. I can see that the font-size is 13.333px, but no option to see where that's coming from.
Yes, in Firebug select the element and then click on the 'Computed' tab (when viewing the HTML frame). Here you will see a list of CSS properties than can be expanded to show the location of the relevant CSS.
The Computed side panel can give you this info.
Note that it just shows the CSS trace - i.e. the styles that are affecting a specific CSS property - for those properties, which are actually changed by the CSS rules of your stylesheet. Though it can display all computed values for an element. To hide the unchanged ones you can uncheck the option Show User Agent CSS.
Also please ensure that you have a current version of Firefox installed (current stable is 20.0.1). Firebug internally uses some APIs for the style tracing, which are just available on newer versions of Firefox.
In Chrome DevTools there is 'computed style' panel which shows you the list of styles for an element property and their locations. For example see the screenshot for text-decoration property.
It's the red marked "navigator" I am talking about. I need to move them away so they don't mess up my design. I have tried to change a lot of different settings without no success.
Here is the View for it:
What should I do?
I am using the following themes: Pixture Reloaded 7.x-2.2 and AT Core 7.x-2.2
Modules: Calendar, chaos tools, views, date modules..
It is obvious some mix up in css. It is a large possibility that elements created by calender inherit some css properties.
Easy fix is to view the source code of he page. Using FireBug(for firefox) or some alternative will make it easier to find. You will find some css rules being applied to your menu. Just try to enable and disable some css rules and see what happens.
When you find mischief just write a css function with higher priority which would negate that other global rule.
I got the same problem and i solved just yesterday hacking some css. I share you here what i have done in my case that i think i will help you also or at least work around there.
First to fixing the big buttons of the calendar navigation you should look in your theme css files at some css class called "ul.pager li a" or "ul.pager li span" there must be a property like "display:block" that is causing this buttons see that way. i just commented that property and they look as normal them should be.
In my case the theme css file was "navigation.css" and this property inside that file is found at line 375. Maybe in yours could be similar, anyway you can check and find where is using the firebug extension for firefox inspecting that buttons.
Second for fix the position of this navigation buttons is something similar but in the css file of the calendar module itself, after modifying the core css file of the module i recommend you to override it placing a copy of it in your template css folder and declaring it on the .info file of the template. In my case the file was calendar_multiday.css, in the line 778 and 818 there are the classes ".view .date-nav-wrapper .date-prev" and ".view .date-nav-wrapper .date-next" inside them with the property "right" and "left" i controlled the positions where must be this buttons.
This is the work around on how i solved it, hope this works for you also but if not anyway the problem is close there.
I am frustrated. I have one website where my drop-down CSS menu works and another where it doesn't.
Their stylesheets differ wildly and, although I have tried to manually copy the menu styles from one to the other, but with no success.
Is their any tool which will let me (like FireDebug) click on a page section (the menu) and then copy the rules which affect that section - ignoring those which are hidden by other rules - so that I can post them into the second site's stylesheet.
It seems that rather than having multiple styles affecting the menu and trying to sort out which have precedence, I'd like to have some software sort it out and generate a single combined rule ... if you see what I mean.
Both FireBug and the inbuilt Chrome Dev Tools show you what styles are being utilised by the selected element. I don't work with FireBug much, but I know the Chrome Dev Tools will cross out overrided styles and even show default user-stylesheets where applicable. It's also kind of nifty when inline styles are applied, eg for a table the "frame" attribute, as it converts these to CSS and displays it as part of the styling ;)
Sounds like you've got problems with accidental inheritance. Try to make sure your CSS selectors are only referencing the elements you want to style. Otherwise things get messy, and stuff like this happens.
I was wondering if anyone knew of a tool that will, when given a number of css files/css rules and a selector - classname, id, element etc. Return all styles that apply with their precedence ordered.
I not, is this doable via JavaScript - I can get the css rules applicable to an element at the time, but can I get those that have been overridden?
In Firebug you can see all qualified styles for any element. It lets you trace the precedence order, but requires you to use Firefox.
(The presentation image on the Firebug page actually shows this behavior. Note the font-size for the h1 selector has been overridden by the more specific .siteTitle class selector.)
Unless you are looking for something you can automate, Firebug should actually be able to solve this one for you. Bring up the context menu (right click) on an element on a pace, pick "Inspect element" and the Firebug pane appears. In the right hand side, you got all CSS rules relevant for the element - those that are overridden are marked with strike-through text:
(source: getfirebug.com)
Try any developer toolbar for Iexplorer or Firefox. Most of them will be able to show exactly what style will be applied to elements. I recon that for example Firebug (addin for Mozilla Firefox) can show what styles will be applied, and where they are overwritten by other styles. Good luck ;).
edit: IE Developer Toolbar also has this functionality.