I am seeing a single dash in the Chrome developer tools as seen in the image below.
What does this refer to? If it had a digit associated with it I would think it meant negative.
Nothing.
That's not a valid value for this (or any) CSS property, it looks like whatever generated that style either failed to provide a value or it's inserting invalid values on purpose (whatever that might be)...
Inspect the element and on the Styles tab (on Chrome) if the property value is invalid it'll show with a yellow explanation mark.
Whomever wrote that code just didn't know what they were doing. They declare padding-right 3 times in one style attribute, and all of them are invalid values (including the one that just says -2 with no units. If we go to chrome dev tools and we apply that same property/value to an element, we get this:
when you hover on the yellow triangle, it tells you that the - is an "Invalid property value".
Related
Safari/Chrome Developer Tools indicate that a CSS rule is overridden by something else by striking it through, as shown in the image.
Sometimes I find myself in a situation where I can not figure out from the CSS files what causes this rule to be ignored. But surely Safari itself must know as it strikes it through.
Is there a way to know what overrides such a rule?
Look at the one which isn't striked out, higher up on the list.
Alternatively, view the computed styles. They will be the definitive applied styles.
When you inspect an element, you can show the 'box'. Just bottom of that, you have a 'filter' which should show you every properties being applied to your element.
If you click on a property, it will give you the file and the line number.
Developer Tools will list all rules for an element. Just read through all the CSS rules that apply, and check for a non-struck-through one with the same name.
Go to Elements >> Computed and you'll get the stylesheet that defines the rule you're looking for.
Go to the Computed tab of Chrome Developer tools. Find wanted property and expand details.
First of all, I did use Google and SOF Advanced search but I didn't find this question.
Now to my question:
I know that initial sets the shadow to default i.e none.
Then what is the difference between these two keywords WHEN APPLIED TO BOX-SHADOW PROPERTY.
For some properties, none doesn't work so that time it is understood but it doesn't make sense in box-shadow and other such properties.
And I did read w3schools initial keyword page completely and I made this thread after reading that so please don't stick me that. :)
Please help me clear my doubt. :)
There is no difference according to CSS specifications and drafts. However, there is a practical difference, because not all browsers support the initial keyword. Such browsers ignore a declaration with the value initial. (If no other style sheet sets the property for an element, then the valus of the property is still its initial value.)
According to the CSS Values and Units Module Level 3 CR, initial “represents the specified value that is designated as the property's initial value”. For the box-shadow property, this value is none.
I've looked in Firebug but can't find why a CSS background property is being cancelled out. I've looked if there is a more specific rule but nothing. Please find the image snippet, as follows:
Maybe somebody has a suggestion?
Firebug will make you think a shorthand property like background or margin (maybe font) was cancelled out when in fact only one property was modified by a later/more specific rule
Use the Computed tab (close to the Style one) to see what's going on.
For each individual property, you'll be able to see which one is more specific and which ones were defined somehow but are cancelled out for real.
It may be a rule with !important modifier for example (meh) or usually a margin-top over a margin and the 3 other properties still with the values set by margin.
Does Firefox have any support at all for the alignment-baseline property? When I inspect (using Firebug) SVG elements for which the alignment-baseline property has been explicitly set, Firebug does not list this property at all (IOW it treats is as noise). No matter what value I assign to this property, the appearance of the displayed text never changes, further suggesting that FF ignores this property altogether.
(One other sign that FF's support for this property may be busted is that the link given in the page cited above for the CSS documentation for this property is dead-as-a-doornail.)
Assuming that, as it appears, FF does not support the alignment-baseline property, what is the value of this property that would most closely replicate FF's default behavior?
EDIT: For example, view this jsFiddle with both Chrome and FF; each line of displayed text displayed a highlighted word that has been produced with code of the following form:
<tspan style="alignment-baseline:alphabetic">alphabetic</tspan>
Note that all the lines look the same in FF, but not so in Chrome.
There are a few possible candidate values for this property to replicate FF's default behavior (namely, auto, alphabetic, mathematic, and inherit); unfortunately, this experiment cannot decide the matter, and it's not clear to me which of the possible options would match FF's default behavior in the greatest fraction of cases.
It seems that alignment-baseline is ment to be used only for portions of <text>, that is for elements tspan, tref etc. For the main <text> element use the dominant-baseline attribute.
(This is what #Tanel Eero wrote above as a comment. I'm re-stating it here so the question can get an accepted answer).
The Mozilla Developer Network website states that the style can only be used on certain elements:
The following elements can use the alignment-baseline attribute
<tspan>
<tref>
<altglyph>
<textpath>
So that seems to be your main issue as I understand that you are trying to apply it to a SVG.
http://jsfiddle.net/CtaBe/
I've tested this in FF, Chrome and IE. Only FF shows the intended behavior (or at least what I think is the intended behavior). Chrome and IE show the same behavior: when you first focus on the input, the cursor doesn't indent. After you type somehing, delete it, and re-focus, it indents properly.
How can I fix this? Because I want to display an image at that indented space.
Quick disclaimer: this message outlines a solid example of why a person would choose to use text-indent on an input field rather than padding. It does not answer "how to fix IE handle text-indent on input fields"
The thing about padding-left is that it alters the width of your input field, which can be undesirable.
Imagine a scenario where you wish to show a background-image icon for the following states of your inputs' data:
required field
invalid input
missed required field
password strength
In such a scenario, we'd need to nudge the text away from the left border to display the icon (which is a much simpler feat than going for the right side, but that's a whole other discussion. If we use padding, the width of the input field changes. That's not ideal, since the various "states" can change.
For instance, maybe a field is only required based on the value of another field. When that field "becomes" required the field "grows" according whatever padding we apply to move the text away from the icon, via relevant class. That's far from elegant, especially when other fields are floated next to it.
Furthermore, in the case of textareas, we wouldn't want to pad the entire side - the first line would suffice.
That's exactly where using text-indent comes into play. And it works great - except in Internet explorer. Which is what has led me here, as I search for other ideas or solutions. I have a few ideas in mind but hopefully there's something simpler that I haven't thought of.
In Chrome, this is a known issue. Please star it :)
'text-indent' applies to block-level elements, table cells and inline blocks. I hope you are using it on a not block-level element.