Whilst debugging a website I found this tag below the body of the page I was debugging:
<link rel="stylesheet" type="text/css" href="data:text/css,">
and I thought that some crazy Javascript-Error was adding this to my site. But I could not find anything like that in all of the project's source-code.
After checking back with Firefox I noticed, that only Chrome displays this tag in the Elements-, Resources- and Network-View. It is not visible in the "View Source" of Chrome though.
What is this about?
I experienced the same strange css link, and found that it is due to the AdBlockPlus (ADB) extension for Chrome that I have enabled. When I disable that extension, the link no longer occurs.
Related
is there any general reason for which Font Awesome doesn't show up in IE 10?
Another question - what's the #font-face thing all about? Do I have to use it? I haven't done it so far and it works well in Firefox and Chrome, could that be the reason for IE?
(excuse my ignorance, I'm a complete newbie)
I had the same issue, the actual cause was https secured connection
I was using https protocol changed it to http
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
I Hope it helps
If it is working on other browsers, make sure you are not in compatibility mode or have not accidentally put your site on the compatibility list in IE.
If it doesn't work in others, it has to have 2 classes: fa AND fa-blah (assuming Font Awesome 4.x; Font Awesome 3.x has different notation)
Also, check your developer tools F12 to make sure all the fonts and CSS/JS is loading into the site.
I searched through many sites, but I failed to get an answer.
Question :
I want to change icon as per given in below image in my browser.
Currently chrome and Mozilla does not support this feature if you want check you can check it in either ie or safari, it will show where you want.
you should add this tag to head
<link rel="shortcut icon" href="<YOUR ICON PATH>">
this is a tool to help you to create icon using converter
http://www.favicongenerator.com/
Those are called "favicons", and you can set one for your website using a special tag in the HEAD of your HTML. You can find many tutorials on this by Googling (now that you know what they're called).
Wikipedia suggests a tag something like this:
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
As an alternative, your website can provide an image named favicon.ico in the root folder.
That icon names "favicon". To create Something like that go to THIS LINK, Upload an image and get the favicon.ico file, then put it next to your template page on your host.
To get more information go HERE.
I'm having a problem with my icon fonts. It works with any other browsers but not with IE8. Already tried bulletproof solutions but without success. The problem is with IE8.. when page is loading, I can see icons, but when page is fully loaded ( progress bar ) my icons disappear.
I'm using external links for my icons files, but I don't think that's the problem. You can see a test page: www.maky.nazwa.pl/new
Does anyone know what's causing this madness?
BTW. Generated by IcoMoon.io
for all who will try to find the answer... this line fixed my problems..
<link id="base-css" rel="stylesheet" href="style.css?family=icomoon" />
style.css?family=nameOfFont
So, I have been asked to fix an issue where a favicon isn't appearing in IE8 at work, but can't seem to figure out why it isn't working. I've even read the official Microsoft documentation on the subject, but haven't managed to get anywhere with this.
I have included the following in head of the site template, where $sitebase is set to http://www.slinkynote.com/ in the config file. The favicon image is a 32px by 32px .ico file.
<link href="<?php echo $site_base;?>favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<link href="<?php echo $site_base;?>favicon.ico" rel="icon" type="image/vnd.microsoft.icon" />
Does anyone have any experience with this issue? It appears fine in FF and Chrome.
Thanks,
Dan.
The problem seems to be that IE8 caches the icon in the browsing history (and NOT its temporary Internet files) ... if it fails once in IE, it will not try again for a while (I don't know how long, but long enough to be very annoying) ... anyway, the following simple header links work fine:
<link rel="shortcut icon" type="image/icon" href="/favicon.ico">
<link rel="icon" type="image/icon" href="/favicon.ico">
I'm not sure why you need them both, probably cross-browser compatibility. But the href does NOT need a hostname with www in it, or any hostname at all. It works even on a local machine
However, if IE8 has messed up its cache then this will drive you crazy. Luckily the solution is simple: change the links to the following (just add x) and make sure the icon will load first time (or else you will just mess up the cache again) ...
<link rel="shortcut icon" type="image/icon" href="/xfavicon.ico">
<link rel="icon" type="image/icon" href="/xfavicon.ico">
Afterwards change the links back to what you wanted originally, then the icon will reload the next time and thereafter be cached successfully.
You are using PNG image in ICO file, and setting wrong mime type. Make another icon but ACTUAL icon file and put it in the place of current one.
Hi I'm editing a website that has been made compatable with internet explorer so it doesn't work in firefox.
Is there any way to add a firefox or mozilla stylesheet?
Thanks for you help
Judi
<!--[if FIREFOX]>
<link rel="stylesheet" type="text/css" href="/AEBP_Homepage_12887/css/firefox.css" />
<![endif]-->
You can't do anything as elegant as the Paul Irish solution for IE but you can create a FF specific set of definitions using:
#-moz-document url-prefix() { CSS BLOCK }
Before anyone starts jumping up and down screaming "THIS SHOULD NEVER HAVE TO HAPPEN UNLESS YOU DID SOMETHING WRONG" - it totally happens when we're talking about Firefox vs Chrome vs IE font rendering on a tightly constrained grid with a lot of left to right text justification.
You might also try out the CSS Browser selector:
http://rafael.adm.br/css_browser_selector/
This simple JS file allows you to append things like .gecko and .ff3 to your CSS.
* APPENDED - 2014 *
I want to actually append this because, two years later, the standard solution is to perform feature detection through modernizr.js instead of browser detection. "Firefox" is a very blunt instrument with all the versions hanging around the net. This answer still works, it's just not the recommended solution unless you very specifically need the browser, all versions, and nothing else.
One way to do this, with php is to look at the user agent and see what browser is it. This is what I use:
Ex:
if (preg_match('/Firefox|Chrome|Opera|Safari|MSIE 8.0/', $_SERVER['HTTP_USER_AGENT'])) {
link rel="stylesheet" href="one.css" type="text/css" media="screen"
}
else {
link rel="stylesheet" href="other.css" type="text/css" media="screen"
}
Also in the preg_match function you should enter the agents that you want.
Have in mind, if you don't know php, that the example I wrote needs editing and correct formatting.
No. The <!--[if IE]><![endif]--> syntax is Internet Explorer specific. It is a non-standard microsoft extension to CSS.
See conditional comments for more details.
No, conditional comments are entirely an Internet Explorer thing AFAIK.
However, you can create a conditional comment that IE will not parse and thus is for non-IE browsers only:
<![if !IE]>
<link rel="stylesheet" type="text/css" href="/AEBP_Homepage_12887/css/firefox.css" />
<![endif]>
this is however not valid HTML. There seem to be workarounds to make it valid. Check out the "Downlevel-Revealed conditional comment" paragraph in the Wikipedia article.