I'm doing some custom dev work on an installation of the Whitehouse WordPress theme. And, it appears that some style rules defined within the theme are overriding various features of the tags I'm using, making it extremely annoying to work.
The cellspacing and cellpadding attributes seem to be overridden, all content in table cells aligns to the bottom, and strange gaps and spaces appear after various elements.
I don't know enough about the theme to know what rules are causing which issues - is there any way to make a browser ignore ALL CSS declarations for a specific element or elements except the inline declarations I add to the tags myself?
the CELLSPACING and CELLPADDING attributes seem to be overridden,
Yes, as the specification says: The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet
I don't know enough about the theme to know what rules are causing which issues
Use a DOM inspector such as Firebug, Dragonfly or the ones built into Chrome, Safari and (recent versions of) Internet Explorer. They will tell you which rules are applied to which elements.
is there any way to make a browser ignore ALL css declarations for a specific element or elements except the inline declarations I add to the tags myself?
No, there is not.
Related
I'm doing a bit of CSS troubleshooting and, as you can imagine, I'm having a tough time getting a div to style the way I want it too. In Chrome, I've opened the development window and I've selected my element to inspect the style settings.
I need to do a quick visual test of some of my changes from within a specific selector. Note, I'm not looking to declare a temporary, specific value for the element.
I've found the selector, and the respective CSS property and as I knew, it is crossed out because a CSS definition of higher precedence is overriding it. However, for my test I added !important after the property value but it did not update my element and remained crossed out.
We have some very complex CSS. There is a chance that it's somehow being overridden but I wanted to be sure-- in Chrome browser, within the development window, if you override a style specified for an object, adding !important should it work?
Does the Chrome browser development tools respect style changes specifying !important?
Yes it does respect the specificity.
You can however test the specificity of your rule before using it in the devtools (or anyplace for that matter) here
Please note: I found this question as well as this one, but both of their answers involve writing and executing customized JS. My question here is about how to wield Chrome Dev Tools (or similar) to accomplish the same thing in real-time.
I have a quasi-legacy JVM app that serves (and creates as part of its build pipeline) all sorts of nasty and messy CSS files.
I'm wondering if Chrome Dev Tools (or any other modern OSS webdev tool for that matter) has a "reverse engineering" feature in it that allows you to click on an HTML element and get a list of all the CSS rules that apply to it. And, not only that, but which rules are overriding other rules.
This way, when I need to tweak my CSS, it's less of a wild goose chase to figure out which rules are coming from which CSS files and that are actually being applied to the live element at runtime.
Any ideas?
Yes, in Chrome DevTools (F12 in Windows / Option+Cmd+I in OSX) within the Elements panel you can click on an element and see the applied CSS rules on the right-hand side. The overridden styles or classes are crossed out, and you can see the file name in which the CSS rule comes from. See below:
element.style refers to inline styles. For example, if I modified the selected element to be <div class="container" style="background-color:#000">...</div>, background-color:#000 will show up in the that section.
#content refers to the div element with the associated id of 'content'. The checkboxes that are checked on the right indicate that they have been applied with no overriding. You can check and uncheck these to play around with the styles so that you can see what you should change in your source code.
The html, body, div, span etc. allows multiple selectors to use the same styles. All the selectors in that comma-separated list will have the styles, except some may be overridden by other CSS rules - in this case, margin and padding are overridden by the more specific #content selector.
The next block is for user agent styles. These are styles that are applied by the browser, and each browser may apply different ones. This can be a problem if you have more specific rules defined yourself. Many people use normalizers to make sure things remain consistent among browsers. Check out Normalize
The inherited section shows all the styles that are inherited from parent styles. In this example, the text-align: left style was applied from the .container class as that is the parent element and the #content element didn't override it explicitly.
Update
Added better quality screenshot (thanks to #SLaks)
Added keyboard shortcuts for access (thanks to #NKD)
Added simple explanations of the sections of the Styles panel on the right.
Modern browsers have an "inspector" option that allow you to select a piece of generated HTML and view the CSS applied to it. Each one varies slightly, but normally hitting F12 will get you going.
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.
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.
In .Net, all styles are not listed in corresponding controls and html tags. For example, the style "WORD-BREAK","WORD-WRAP" etc. Any site which lists all styles available to all tags and controls ?
W3schools is a great place to start learning CSS.
The official specification is another place to look.
Have a look at w3schools. http://www.w3schools.com/css/css_reference_atoz.asp
But remember that there are also styletags specific to a certain browser (like the mozilla tags).
As far as I know Visual Studio shows the tags which are compatible with all browsers (and that might be the reason why you are missing some items).
Also, you can apply all style tags to all HTML tags (you can assign font to an img tag), but they might not give you the effects you are hoping, but the beauty of CSS is that you can assign any style to any tag (and if you are embedding tags in eacht other it will inherit the style, so for example assigning a list-style to a div might not look usefull, but is allowed and will cause all lists in that div to look the same, ofcourse this can be done in various other ways).