For some reason, two icons that show in IE and Chrome do not appear in Firefox and instead gives me some weird icon. I am using a font to display these.
I used firebug to track down exact CSS code for this but it simply shows
.icon-signin:before{
content: "";
}
whereas in IE, it shows
and in Chrome it shows:
I honestly don't understand what's happening here.
In the actual CSS file it has the following line:
.icon-signin:before{content:"\e047";}
All I could gather from google search is that
:before
is outdated and that I should use
::before
Would this fix the solution?
But if that is the case, why is Chrome displaying the icon when it also reads the css code with :before, not ::before ?
Related
I have a problem with content from CSS on IE11.
.icon-ok:before{content:"\f113"}
IE11 is computing this to .icon-ok::before{content: normal}
I can see that there is .icon-ok::before{content: "\f113"} but it is crossed.
So I didn't get the right icons there. - Ofc it is working on all other browsers.
I thought that's because of the ::before pseudo-class, but it is computed by IE, in the source css file it is written as :before.
Can somebody tell me whats wrong there?
Edit:
I figured out that the IE is changing the icon-font id's.
When I use "\f118" in IE it is working properly there.
How can it be?
This can happen because different browsers needs different formats of the font.
So this isn't basically a CSS problem rather a problem which format of the font is used.
The render of a FontAwesome icon works perfect on Firefox. But when I wanna change it through the inspector (Firebug), it doesn't show the unicode (for example: f066). So where I should have:
content:"\f066;
It shows:
content: "";
It is not showing the data correctly. If I overwrite a new one (\f077) it prints nothing. Is it possible to fix it? What I need is to be able to change FontAwesome icons from the inspector, like on Chrome.
I've been looking for an answer for 3 days straight now (i did sleep a few hours though).
I'm using a wordpress theme that integrates font awesome icons smoothly. But i wanted to alter these icons and use my own, but they won't show in Firefox but do show in Safari, Chrome etc.
I'm using this css code to alter the icon to my own icons:
.fa-euro:before {content:url(http://nip10.nl/xtra-icons/icon-2.png);}
.fa-glass:before {content:url(http://nip10.nl/xtra-icons/icon-1.png);}
.fa-bell:before {content:url(http://nip10.nl/xtra-icons/icon-3.png);}
.fa-coffee:before {content:url(http://nip10.nl/xtra-icons/icon-4.png);}
You can see the website here: www.nip10.nl
Hope someone can tell me how i can alter the css code so the icons also show in FireFox.. I've tried anything from naming images to .jpg files etc. etc..
You should validate your HTML. See here: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nip10.nl
I'm going to guess that the problem is that firefox is running into this error
Line 1069, Column 26: Element style not allowed as child of element
div in this context. (Suppressing further errors from this subtree.)
And failing to parse the embedded style sheet. You should also not embed your large stylesheets like that. Make them external style sheets. Once that's done, find where your HTML error is that's causing the validator to think you don't have the style sheet in the head tag and it should fix itself.
The css top or margin-top values in chrome is so different with firefox and opera,what should I do?
For example in chrome when I put (top:0px;) my menu is in its right place,but in firefox I have to put (top:-80px;).
What should I do?please help;Thanks in advance.
and also firebug doesn't have any errors.
Sorry I couldn't post a jsfiddle link because the site contains lots of pictures and I reaaly wanted to post pictures so that you can understand what I mean better,I tried but I needed 10 reputation but I have only 8.
You need to reset all the styling that a browser applies, then it will only apply your styling, instead of adding it's own aswell. To do this include a redet style sheet such as Normalize.css
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
I'm having an issue with a dropdown menu in IE8. Everything looks OK on Firefox and Chrome but not in IE8, more precisely the text from the dropdown menu doesn't show up. What am I missing?
This is the website: http://stuffforyourdog.com/maxabiz/collegeadvisors/index.html
The problem is due to the use of Cufon plugin. I copied your html/css in jsfiddle and it works on all IE/Chrome/FF. http://jsfiddle.net/t6sqV/ I suggest dropping cufon, and use a service like Typekit instead: https://typekit.com/ . You can also use http://www.fontsquirrel.com/ to download fonts ready to be used using only CSS.
ps: be careful. hover on non link elements does not work for IE6.