From where Computed values comes, is it comes from browser default css?
Is the computed value and browser default styles same thing?
alt text http://shup.com/Shup/360142/11058112245-My-Desktop.png
No, they're not the same thing. Computed values are the current styles of elements. These computed values will contain the defaults if no other value has been set, or the dominating value if one or more has been set.
Computed values are exactly that, the value after the browser has computed all the factors that affect those values.
You can get computed values from script using element.currentStyle (IE) and window.getComputedStyle(element); (W3C):
// Note that Firefox requires the second argument is passed even when null.
var cStyle = element.currentStyle || window.getComputedStyle(element, null);
The browser style is a stylesheet the browser has as the default styling, like adding underlines to links, makes headers larger, strong as bold, etc. (Some developers don't like the inconsistency between browser styles so they apply resets, eg: YUI Reset)
When you visit a website which has its own stylesheet, those styles are added on the website elements after the browser has added its.
Eg. the browser's default styles says that all a elements should have an underline and be blue. You visit a website which uses a css reset, which says for example, that all a elements should be blue without an underline. The computed style at this point for an a element is blue without an underline (since the later applied reset overrides the browser styles). Then the website's master stylesheets are loaded which makes it pretty, and it says that all a elements should have a text-shadow, in addition to a lot of other stuff. The computed style is now blue, without underline and with text-shadow.
The reason there are so many other properties in the computed styles section is because the browser adds a lot of default styling.
As a sidenote, this gets a little more complicated with css selector priorities.
It comes from the browser's CSS engine. so yes, it comes from the browser.
The computed style is the actual style applied to the element after all style rules has been sorted out.
The style rules may come from:
The browser default styles
Optional user defined styles in the browser
Style sheets in the page
Style attribute in the element
All style rules that apply to the element are considered, and the ones that are most specific and specified last for each property is the ones that apply.
Related
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.
The web-page I'm authoring has a TABLE in it. The TABLE's border-collapse property is being set by a 3rd party CSS file that I import to be 'collapse'.
When I open the page in IE7, I notice that the table doesn't look right (the borders of the cells are visible as white lines).
Using IE's Developer Tool, I can enable/disable the 'border-collapse:collapse' attribute of the CSS I'm including using the check-box next to it in the Developer Tool's UI.
When I unchecked the box, the TABLE looks right again (no borders visible).
So, I thought that if I put an inline style on the table element, setting the property value to 'separate' that would override the CSS file's value and the table would look right.
When I add the inline style to the TABLE however, it doesn't affect it's appearance. In the Developer Tool, I see that now the 'border-collapse:collapse' attribute of the CSS has 'strikethrough' style ie: it looks to be ;crossed out', but it seems like it is still being applied, because if I uncheck/check the box next to it, it still toggles the visibility of the cell borders.
My questions are: shouldn't the inline-style value be overriding the CSS-imported value for this attribute? Why does the attribute from the CSS appear crossed-out in the Developer Tool but is apparently not disabled? Is there some other way I can prevent the CSS value from being applied to border-collapse for this table?
Thanks,
NB: I also tried adding '!important' after 'separate'
Yes, an in-line style specification would override (have a higher specificity) than a style coming from an imported stylesheet. But that could be overridden by a JS-applied style.
I have uploaded an example page
https://bobdn.com/Temp.aspx.
This page has just a single jquery UI button.
Why does this look little large in firefox.
Padding and font-size both look large.
It looks fine in chrome.
How can I make it equal size (padding, font etc) for both browser.??
My guess it that it's inconsistent rendering of the <input> element. I can verify that the rendering is inconsistent between each browser, with a 2px height difference.
If you can use a <button> element instead, you may find that it renders more consistently from browser to browser, although you will most likely have to adjust padding yourself.
That done, you need to try setting any of the relevant styles explicitly, rather than relying on defaults.
This includes: line-height, padding, font-size, border-width, and perhaps more.
Every browser has it's own defaults.
If you want consistency, you must provide css that replaces the default values.
I fixed this problem by setting the defaults explicitly.
Ex. I created a input.navigation_button CSS class with padding:2px (Chrome had zero padding on my buttons).
Some text on a page I'm modifying is displaying with a computed size of 16px, which I understand is the default font size for most browsers. Firebug in FF 10 shows several font sizes which would apply to that element, but all are overridden (selector and value displayed with strikethrough).
Why would this happen? I assume any styles applied via scripting would appear in an element.style selector.
I believe having a table element inside a p element is invalid HTML (you can check that by running through a validator).
I suspect this is the problem, and then the browsers are not letting the table inherit the font properties (due to the invalid structure) and thus are defaulting to the browser settings.
I think if you get rid of the p as a wrapper and make your css include:
#cajanoticias table {font-size: 10px}
you will solve your problem.
Are there any stylesheets which make, say, input view like default in each browser?
I mean not the same view in every browser, but still default view in each of them.
UPD. Of course it's the case when i have some parent css which i need to override back to default view, especially for particular element.
Just don't use a CSS reset stylesheet and every browser will use its own default rendering settings until you start to override them.
Every browser pretty much has its own standard stylesheet with custom css for common elements such as paragraphs, body element, and all the rest of the elements which it supports. Each browsers stylesheet isn't exactly the same, so for example while one browser sets padding on the body, another will set margin on the body element.
If you rely on a css reset, you basically attempt to gain more control by explicitly setting certain properties to a consistent value, such as margin and padding on all elements to 0 ( which isn't preferred for form controls ).