Hi guys I have a problem with some sites from my university and at my localhost. We started with web developement and learned html and css. The thing is I found a very weird CSS Tag in my Head with very weird and scammy looking refs. I looked at some of the links and maybe it sounds weird but some links are P*rn sites or some tracker sites as it seems from the names. I only have this problem on the sites my Uni gives me where my tasks are and at my localhost when I work with Spring and Intellij on my own Website. I am a little scared tbh. I run the Opera GX browser. I tried Firefox to check if the style tag was there aswell but there wasnt. The tag starts like this : : "some weird root: tags and hrefs" Anyone has a clue whats going on?
I also checked at my laptop since it runs opera GX aswell and the weird style tag is there aswell. I didnt find any help when I checked in google for a solution.
Sometimes your browser extension forcefully append html/css tag in your browsing site. So try to remove unwanted extension/add-ons from your browser.
Or clean unistall your browser and install a fresh one.
If you saw anything similar to this:
<link rel="stylesheet" type="text/css" href="mystyle.css">
This is a cascade style sheet file pertaining to your site and can be loaded directly from a website
If you saw anything similar to this:
<style>
h1 {
color: orange;
}
All coding in this section is styling directly embedded into your website via your html file.
I was playing with Path 2.0 flying menu (http://codepen.io/sparanoid/pen/nHAmi) earlier and realized once I remove the link style tag from the index.html and put them into css files to link back to the file, the web page doesn't work as it was before anymore.
The link tag I use is very standard:
<link rel="stylesheet" href="css/style.css" type="text/css"/>
This link tag replaces the second style tags in the example files. I searched online and there is no documentations about some condition when only the style tag could work.
I suspect that the reason might be prefixfree.js cannot interpret css files (but can interpret style tags). I wonder if that's the reason, how I can set up correct interpreter for prefixfree.js.
Try not to use prefixFree. It's a buggy plugin. It doesn't always work with webkit based browser such as Safari, Chrome, or Opera even when set up a remove server (and certainly do not work when using local files).
There are two reasons why this might break:
Browser can't download the file.
The order of style sheets matter.
Look into your browser's error log. If you see an error there, fix it.
If there is no error, then there is a problem with the order of the styles. Later styles overwrite earlier ones. Try to move the <link> element to see how that changes things or use your browser's developer tools to see which styles get applied.
When page of my application is loaded font in some html tags is default one and when you mouse over it, proper font immediately shows. I made a list of things that probably matters:
Position of element doesn't matter, it occurs on absolute and static.
Font of my choice if assigned to body tag so there is no way some stylesheets don't get loaded.
I load fonts via #import from fast.fonts.net. This line of code is almost on the top of my stylesheets, above is only reset.
I load my assets from s3, minified in one file.
It never occurs locally and the only browser that this bug was seen is Chrome.
It is rare bug, maybe 1% of all page refresh, so reproducing when you want to see it is difficult
Once I have seen this issue in bugsnag.com
App is heavy on front-end side
Do you have any ideas how I could fix it?
I discovered that injecting fonts via JS script tag and not css #import works best. After that client stopped reporting me this issue.
It's simple change and the reason why it works must be connected with some Chrome bug.
Strangely, none of Bootstrap3 glyphicons are displaying in Chrome v31(displays a small square). But, works fine in FF v26, Opera v18, Safari v5.1 and IE v10. Also, works fine in Android 4.x - Chrome and FF.
Tested with simple code: <span class="glyphicon glyphicon-adjust"></span>
Please help. Thanks much in advance!
Environment: Windows 8.0
Rather than fix your problem, I prefer to teach you how to fix your own problem.
Right click on the element and choose "Inspect Element". That will bring up a window showing you some useful information about the html and the CSS that's applied to it.
If it's a sprite image (as in Bootstrap 2), look at the CSS on the right hand side, looking for the top-most (un-crossed-out) background-image. See the url for the sprite image. If it's a glyphicon (as in Bootstrap 3), look for the font-family instead.
Go to the Network tab. You may need to refresh the page to get useful stuff there.
Look for where it loaded that sprite image or font (e.g. glyphicons-halflings-regular.woff). If it says it has a status of "304", that means it was loaded from the cache. In that case, clearing the cache and reloading the page might solve your problem.
If it wasn't a "304" status, you might have a problem where the web server isn't serving up the image (a "404" or similar status) or it's not coming up correctly for some reason.
If clearing the cache didn't solve the problem, click on the URL for the sprite image or font on the Network tab, and then click on the "Preview" tab. What you should be seeing is a block image that contains your icon and all the other icons, or the alphanumeric characters in that font. If this isn't what you're seeing, again there is probably something wrong with what your web server is serving up.
If the sprite image is correct, then there is probably something wrong with your CSS where you're accidentally overriding the background-position for the sprite. Again, go back to your Elements tab and look at the CSS that's generated.
I had the same problem. The easiest solution is to directly import the CSS from the hiperlink, do not download it:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
The problem is that the CSS use other relative paths to other files. Therefore, you can do 2 things:
1. Download all the relative paths.
2. You can simply use the hyperlink (easier).
It looks like this is a bug in WebKit, which has been reported here: https://bugs.webkit.org/show_bug.cgi?id=76152
Also, the creator of GlyphIcons says he is aware of this issue and will try to use different unicode values in the next release to get around this bug: https://twitter.com/glyphicons/status/423426740128854016
Note to readers: be sure to read #user2261073's comment and #Jeff's answer concerning a bug in the customizer. It's likely the cause of your problem.
The font file isn't being loaded correctly. Check if the files are in their expected location.
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
As indicated by Daniel, it might also be a mimetype issue. Chrome's dev tools show downloaded fonts in the network tab:
My .htaccess in /wp-content caused the error due to a file type restriction. After I added woff2 to the list of allowed file types everything works nicely again.
# Protect /Wp-Content/
Order deny,allow
Deny from all
<Files ~ ".(xml|css|jpe?g|png|gif|js|svg|pdf|kml|**woff2**)$">
Allow from all
</Files>
I had the same problem as you:
Go to your CSS folder.
Open the bootstrap.min.css file.
Search for glyphicon text in that.
You can find out its url address.
You should change the font folder name to fonts.
Go and enjoy your life. :)
When the font response header is "Content-Type:text/html; charset=UTF-8" the chrome v38+ will have problem to show the bootstrap glyphicons, it will resolve this if set response header as "Content-Type:application/font-woff"
You need to download bootstrap fonts folder, and in your bootstrap.min.css you can find path like ../fonts for glyphicon, you need to change this path to "fonts/" remove ../ if your fonts folder is within same bootstarp.min.css .
enjoy :)
I discovered that upon inspecting the CSS of bootstrap.min.css that the directory location for "fonts" had added spaces which meant that it was calling for files that don't exist because the file names don't have those spaces in them. For example, it was listed all the way through every one as
.. / fonts / glyphicons - halflings - regular.eot
when it should have been
.. /fonts/glyphicons-halflings-regular.eot
Once I deleted the spaces, re-uploaded the CSS, cleared the browser cache, and reloaded (F5 button) the glyphicons finally showed up. Prior to removing the extra spaces the only other option that worked for me was that given by Gines Hidalgo who suggested downloading the CSS through a hyperlink. But with the discovery that removing the extra spaces fixes the problem that option is no longer necessary.
Its mostly bootstrap versioning issue and simply I added below URL.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"/>
Ensure that you have the fonts folder in your project besides the js, css and others.
If the fonts folder is in the project and the path in the bootstrap.min.css file is like this ../fonts/glyphicons ie the fonts folder not in the css folder, Then everything will work just fine. Thank you.
If it helps, using bootstrap.css instead of bootstrap.min.css fixed this issue for me.
I've checked a few places for an answer but I could not find one, so I thought I'd ask. I created a website on a free HTML5 template (the template was for a photo gallery). The website works fine on Google Chrome and Firefox but for some reason, some stuff like the fonts dont appear in Internet Explorer (tried with and without compatibility settings on IE9). Could this be because of IE's security measures or have I coded it incorrectly?
The website is at masidtech.com
On Chrome it looks like
But on Internet Explorer it looks like
I was going to use paste bin but the pastes look really ugly for source code.
So I have uploaded the entire website to MediaFire at http://www.mediafire.com/?9m2108pgzyje79t
and it's a 7Zip file (or I guess you could view source)
+I am no coding guru so I'd really appreciate if you could throw in some layman and thanks.
I faced similar issues in recent past. I can help you if you provide certain details. I just checked the link with the working image. I also tested the link with the notworking.jpg
Can you tell me the exact url in the browser which u see after http://masidtech.com/
for the non working image.
This is not a big issue, with modern browser in scene, and due to their hefty security policies the same website behaves differently in different browsers.
It seems that cufon doesn't work in IE9 – a friend has had a similar issue this week. I'm not sure why, or if there is a way to get cufon to work, as I haven't used it.
There are two options - keep using Cufon (why? I don't really get why Cufon exists!), and add this above your first replace() call:
<!--[if gte IE 9]>
<script type="text/javascript">
Cufon.set('engine', 'canvas');
</script>
<![endif]-->
Alternatively, and prefered, use font-face. If you use a eot, ttf and woff version of your font, it will work everywhere. http://www.fontsquirrel.com/fontface/generator has a tool to generate the fonts and the code from a ttf, if the font allows it.
You may find that http://www.google.com/webfonts has the font needed instead, which is Google's way of hosting fonts.
Edit: I've had a look and found Google has it: http://www.google.com/webfonts/specimen/Quicksand . Follow the wizard, stick their one line of code in your <head>, remove cufon and it will work.
Nice site design by the way :)