I'm sure that css code is correct. But Firefox cannot understand and display it.
Here is case 1 within css:
.fa-circle:before {
content: "\f111"
}
and here is another case:
.fa-group:before,
.fa-users:before {
content: "\f0c0"
}
Can you tell me how to fix it? Thank you!
Sounds to me like your pseudo-element's containers (the i and span elements) are having their font properties overridden by something else.
In Firefox's element inspector you should see the following inherited styles:
Importantly the font-family property should not have a line through it - if it does, it means the font being used isn't Font Awesome. If that is the case you'll instead see:
If this is the case, the font being used isn't Font Awesome and the requested character code doesn't exist in the other font's character set.
Related
I have elements with this pattern (XML, not HTML, but CSS should still work):
<expan abbr="XX">YY</expan>
Sometimes I want to see "YY" in the output, sometimes I want to see "XX". No problem when I want to see "YY" and not the attribute value: just leave it as is. No problem if I want to see BOTH the element content and the attribute value: this bit of CSS does that:
expan:after {content:attr(abbr);}
will display <expan abbr="XX">YY</expan> as "YYXX".
But: problem if I want to see the attribute value and NOT the element content -- that is, if I want to see just "XX". I can use either CSS display or visibility to hide the element <expan>. But it hides EVERYTHING, including the :after pseudo-element. So, this code:
expan:after {content:attr(abbr);}
expan {display:none;}
Shows nothing at all.
So, good folk... help. This seems a very obvious thing to want to do. Of course, I could do it pretty easily manipulating the DOM with Javascript. But for various reasons, I don't have that option. I'd like to do it with simple CSS. Can I??
You'll have to use some kind of hack where the element is still there but only the pseudo element (:after) is visible to the user. An example of this would be color. If you know it's only text, then you can set the color to transparent on the main element, and set it to a real color on the pseudo. You'll still have a blank space to deal with, but you can fix that with position: relative on the parent and position: absolute on the pseudo element, because the pseudo element is a child of the main element. note that the text is still there, but you only see it if you highlight it with the mouse. That's fixable too, with ::selection, but it would still be copyable by accident, and ::select is only available in modern browsers.
Here is a demo showing what I mean: DEMO
EDIT: This one should work with text around it, but you'll have to increase the width in order to add more text: DEMO
Works for me in Chrome and Firefox.
One partial solution is to set the expan font-size to 0 and the :before content font-size to the desired size:
expan:before {
content: attr(name);
font-size: 15px;
}
expan {
font-size: 0;
}
Trying to set the :before font-size to 100% did not work.
You can only set the 'content:' attribute on ::before and ::after psuedo-elements.
But what you can do is just provide both your texts in two separate attributes, like this:
<div long-text="This is very long text" short-text="Short text">
<!-- this part is empty -->
</div>
Then your CSS can switch between them like this:
.AltText::before { content:attr(long-text); }
#media screen and (max-width:1200px) {
#HeaderTabContainer .AltText::before { content:attr(short-text); }
}
Or you could use a third attribute to toggle between them.
In IE 8, I am seeing the alt text getting displayed in the print preview when the image is not getting displayed.The issue is not occurring in chrome. I want to fix this issue in IE 8.
Src of the image gets added in run time. At some times images will not be available from the server
<img src="null" alt="weird issue">
Needed a fix without using javascript
You can't style the alt text directly, but it will inherit from the img parent so probably the easiest is to simply set the color of your img to white in the CSS (and if for print applications, then within your print styles).
Try this:
img{
color: #fff;
background-color: #fff;
}
In that example, I've also set the background-color to white but this probably isn't 100% necessary given that if this is a print style, the background will inevitably be white anyway.
As has been mentioned in the comments below this answer, you may be able to use a CSS attribute selector to only target those imgs that have 'null' as their source.
This would work like this:
img[src="null"]{
color: #fff;
background-color: #fff;
}
This would, however, come with a few additional requirements/assumptions:
That the src is indeed 'null', and not just an ampty string (in which case you could use img[src=""]).
CSS attribute selectors work in IE7 and up. However, IE7 and IE8 are a little delicate to !DOCTYPE declarations so you have to ensure that your page has a valid !DOCTYPE declared.
Older browsers (IE6, for example) will not support this, so you'll still get the alt text come through.
Assumes that a CSS resolution is actually what you're asking for, and - as before - that the background the image sits on is indeed white!
You could extend upon ths use of attribute selectors to simply ensure that those images coming through with src="null" aren't displayed at all:
img[src="null"]{
display: none;
}
For mozilla : study this code and find a way to achieve it with other browsers.
img:-moz-broken:before,
input:-moz-broken:before,
img:-moz-user-disabled:before,
input:-moz-user-disabled:before,
img:-moz-loading:before,
input:-moz-loading:before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken:before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled:before {
content: -moz-alt-content !important;
unicode-bidi: -moz-isolate;
}
Or, some absolutely basic inline javascript, some verry ugly old-school inline event handler:
<img src="broken.png" onerror="this.style.display='none'" />
Im importing an XML feed which has inline styles applied to its divs like:
face="Verdana"
I want to override this with CSS. Ive tried this:
#containing-div div {
font-family: arial !important;
}
But its not working. As 'face' is deprecated I'd hoped it would be overridden with the 'font-family' but it appears not to be. Given that I can't change the XML feed (I know I should be able to but just trust me!), how can I override this?
Thanks
Assuming that this:
face="Verdana"
is actually this:
<font face="Verdana">..</font>
(and it must be, right? There's no way it's <div face="">)
then you should use this CSS:
#containing-div, #containing-div font {
font-family: arial;
}
There should be no need for !important. The point is to select the font elements.
The problem might be the "XML" part. Can you set other properties with the #containing-div div selector, like background or border? If not, the selector might not match, because the ID is not correctly defined by the XML fragment or the namespaces don't match.
I'm inspecting an h2 element on a web page using Google Chrome's element inspector and some of the CSS rules--which appear to be applied--are grayed out. It seems that a strike-through indicates that a rule was overridden, but what does it mean when a style is grayed out?
For me the current answers didn't explain the issue fully enough, so I am adding this answer which hopefully might be useful to others.
Greyed/dimmed out text, can mean either
it's a default rule/property the browser applies, which includes defaulted short-hand properties.
It involves inheritance which is a bit more complicated.
Inheritance
Note: Chrome dev tools "style" panel will display a rule set, because one or more rules from the set are being applied to the currently selected DOM node.
I guess, for the sake of completeness, dev tools shows all the rules from that set, whether they are applied or not.
In the case where a rule is applied to the currently selected element due to inheritance (i.e. the rule was applied to an ancestor, and the selected element inherited it), chrome will again display the entire ruleset.
The rules which are applied to the currently selected element appear in normal text.
If a rule exists in that set but is not applied because it's a non-inheritable property (e.g. background color), it will appear as greyed/dimmed text.
here is an article that give a good explanation - (Note: the relevant item is at the bottom of the article - figure 21 - unfortunately the relevant section doesn't have a heading) -http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033
Excerpt from the article
This [inheritance scenario] can occasionally create a bit of confusion, because defaulted
short-hand properties; figure 21 illustrates the defaulted short-hand
properties of the font property along with the non-inherited
properties. Just be aware of the context that you're looking at when
examining elements.
It means that the rule has been inherited, but is not applicable to the selected element:
http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style
The pane contains only properties from rules that are directly applicable to the selected element. In order to additionally display inherited properties, enable the Show inherited checkbox. Such properties will be displayed in a dimmed font.
Live example: inspect the element containing the text "Hello, world!"
div {
margin: 0;
}
div#foo {
margin-top: 10px;
}
<div id="foo">Hello, world!</div>
Michael Coleman has the right answer. I just want to add a simple image to go along with it. The link that he included has this simple example: http://commandlinefanatic.com/art033ex4.html
The HTML/DOM looks like this...
The Styles Pane in Chrome looks like this when you select the p element...
As you can see, the p element inherits from its ancestors (the divs). So why is the style background-color: blue grayed out? Because it's part of a rule-set that has at least one style that is inheritable. That inheritable style is text-indent: 1em
background-color:blue is not inheritable but it's part of the rule-set that contains text-indent: 1em which is inhertiable and the developers of Chrome wanted to be complete when displaying rule-sets. However, to distinguish between styles in the rule-set that are inheritable from styles that are not, the styles that are not inhertable are grayed out.
This also occurs if you add a style through the inspector, but that new style doesn't apply to the element you have selected. Usually the styles shown are only those for the element selected, so the grey indicates that the style you just added doesn't select the element which has focus in the DOM navigator.
It means the rule has been replaced with another rule with higher priority. For example stylesheets with:
h2 {
color: red;
}
h2 {
color: blue;
}
The inspector will show the rule color:red; grayed out and color:blue; normally.
Read up on CSS inheritance to learn which rules are inherited/have higher priority.
EDIT:
Mixup: the grayed out rules are the unset rules, which use a special default stylesheet that is applied to all elements(the rules that make the element renderable, because all styles have to have a value).
When using webpack, any css rule or property that has been changed in the source code is grayed out when the page reloads after a rebuild. This is really annoying and forced me to reload the page every time.
The new version of chrome developer shows where it is inherited from.
I'm answering long after the question already has many correct answers because I encountered a different case of having a block of CSS code greyed out and uneditable in Chome DevTools: The block in question contained U+200B ZERO WIDTH SPACE characters. Once I found those and removed them, I could edit the block in Chrome DevTools again. Presumably this might happen with other non-ascii characters as well, I haven't tried to figure that out.
Here is my code:
.blue {
color:#6E99E1;
font-size:9px;
}
<span class="blue">::CLICK HERE:: to view our New Equipment inventory. <br /><br /></span>
I've somehow triggered something that prevented the <a> tag from inheriting color of parent <span>.
Just an addendum to the other responses, if you want your <a> tags to inherit the colour from their parent you can use
a {color: inherit; }
By default an anchor tag does not inherit attributes like color if an href attribute is present.
Check out the difference between these two on a page:
<span style=color:green>test</span>
<span style=color:green><a>test</a></span>
The following link is to the w3 c:
http://www.w3.org/TR/html401/struct/links.html#h-12.2
User agents generally render links in
such a way as to make them obvious to
users (underlining, reverse video,
etc.). The exact rendering depends on
the user agent. Rendering may vary
according to whether the user has
already visited the link or not.
.....
Usually, the contents of A are not
rendered in any special way when A
defines an anchor only.
This is an answer to the question as well as a reply to Kevin's answer and its comments.
Anchor tags do inherit color, linked or not. The only reason they don't in practice is because they already have their color set in the browser's default stylesheet. The same can be said for the underlining of the link (which, I presume, you didn't notice, because you actually want it or had already changed it yourself).
In Firefox, you can see this in Firebug if you toggle "Show User Agent CSS" (or you can have a look at Firefox's internal stylesheets directly. You can see the browser's defaults in Webkit's Web Inspector and Opera's Dragonfly as well. I don't think you can in IE.
I don't know of any site which has an overview of all browser's defaults. CSS2's "informative" HTML4 stylesheet as well as the YUI reset stylesheet would be a good starting point, but neither of them mention any (link) colors (the HTML4 stylesheet does mention the underline).
To find out which properties are inherited in general, you can use the CSS2 reference property index table (see the "Inherited?" column). SitePoint also mentions it in its CSS reference.
So if you want to make sure your link inherits its color from its parent instead of from the browser's default stylesheet, you would ideally do something like this:
.blue a:link {
color: inherit;
}
You could set it for the different pseudo-classes separately (so :visited, :hover and :active as well), or for the a tag altogether.
However, IE6 and IE7 don't support the inherit keyword, so if you want to support them too, you'd have to set the color explicitly.
I think a doesn't inherit color by default. (certainly it has always worked that way on my sites). Why not change
.blue {
color:#6E99E1;
font-size:9px;
}
to
.blue, .blue a{
color:#6E99E1;
font-size:9px;
}
Firebug will show you exactly which style rules are applied to which elements. It's perfect for this.
(A non-CSS possibility: Do you have link/alink/vlink attributes on your <body> tag?)
Edit: Duh, silly me, the others have it right - <a href> doesn't inherit colour. But Firebug is still a good tool for this kind of problem (even if I'm not. 8-)
In addition to firebug (which should be your first port of call), the IE developer toolbar will also tell you where a given style is sourced from, just in case IE - shock, horror - should be different.
You need to explicitly set the color of the links to override the default blue color.
You are likely seeing the a:visited colouring. Try this:
.blue, .blue:link, .blue:visited {
color:#6E99E1;
font-size:9px;
}