Me and my colleague have been trying to solve this problem for awhile and we can not get it to work. Hopefully someone out there is smarter than us and have some good input on this.
When using IE8, IE9 or IE10 to visit websites http://glyphicons.com/ or http://getbootstrap.com/components/ not all the glyphicons are showing (some are showing but others just show as boxes []).
In Chrome all are showing.
EDIT: I should add that this is on computers on our company network. Could there be a setting here that prevents us for show all glyphicons?
EDIT2: I now have suspicions that our Group Policy disables XMLHTTP for all users on network. Therefore, is it possible to encode the halfling font and use it directly in the CSS?
I have found the solution. It was quite simple. Unfortunately I won't be able to use Glyphicons.
IE have a setting to restrict font download. This is enabled by group policy and cannot be changed on standard workstations. I have been able to recreate the same behavior on my own laptop by restricting font download.
Se this article for further explanation:
http://msdn.microsoft.com/en-us/library/ms533034(v=vs.85).aspx
To answer your comment olahell, if you count icons you will get 470 icons although it's write 420 with IE8. It's maybe an old forgotten image only shown on old IE version.
It looks like the Glyphicons site does some browser sniffing to come up with the 470 / 420 icon figure. The most likely reason for that is that 50 icons dont work in IE; and that is probably due to IE having no SVG support.
Related
Days of Internet research and worsening frustration lead me here. I cannot figure this out. Perhaps a wiser person can help.
Using web developer tools, every site page displays fine in every tested browser. However, when I check on an actual iPad and iPhone, no page displays correctly. What's wrong is that none of the CSS in style.css is executing on the iPad / iPhone.
I am using bootstrap, which it sees, but it does not see my style sheet (css/style.css). I have tested too many things to list, including absolute versus relative URLs, and rearranging the link tags in the header.
I tested inline and head-embedded styles and both work. But this is unacceptable to me.
I removed all code from the footer, leaving one div with a class from the external stylesheet, and that did not work. The iPad is blind to it.
I cannot debug the iPad from the iPad (I know Safari has instructions for this), but I have other bootstrap sites I coded that work fine and comparing them I cannot see what I am doing differently now.
I re-booted my iPad many times in case it was a cache issue.
I left out code in this question because I do not know what code to show. I can provide code or URLs or anything else if that helps. The pages are published.
I appreciate any assistance. Thank you.
I'm having a problem with a Wordpress based site I'm building on: In Chrome, on Windows 7, the body text on the sites' homepage is set to display as a Google Font. However the last line of the text is displaying as the default sans-serif font.
I have thought about asking about this on Wordpress.org but as the problem is confined to one browser on one OS (albeit the most commonly used browser on the most commonly used OS, natch) thought better to ask here. Have been looking all day and not seen anyone else have the same problem.
It's the latest version of Chrome and there is no problem in IE, Firefox, Opera etc. No problems (as yet...) on any other platforms at all.
There don't appear to be any problems with any other Google Fonts used in the site.
The site is currently hosted at http://best.videofeet.com
Upon inspection of the source there is no apparent reason why it would render like this.
I'm stumped.
Here's a link to an image of the problem (From VirtualBox on Mac - the only means I have available to me to replicate the bug as described by the client): http://imgur.com/XdJlCbc
OK, I'll take a stab at answering this now I've had a tinker. It looks like Josefin Sans does not have a glyph for ellipsis (…), so Chrome is swapping out that line. There are other people experiencing this with other Google fonts:
https://code.google.com/p/googlefontdirectory/issues/detail?id=204
http://wordpress.org/support/topic/a-problem-with-ellipsis-the-google-font-story
The lack of ellipsis can be tested here
Either swap the ellipsis for three periods and risk the wrath of typophiles, or change the font I'm afraid.
Before and after image showing the paragraph tag with the ellipsis removed in developer tools here:
http://i.imgur.com/RmQwlaa.jpg
I'm new to the 320 and up template and I'm currently in the process of testing a shell of a site on ie9 but using dev tools to test ie8 & 7 in standards mode.
The site also uses biolerplate html5 and wordpress.
I've looked at and tested what I feel is everything I can see and it all looks like it should work in all browsers... it doesn’t
I've uploaded a test site here:
http://dev.clear-living.co.uk
If anyone can spot the error that my eyes (blearily) fail to see please point it out for me. I've been looking at this for two days now!
UPDATE:
when I say it doesn't work I mean it stays on the 320 width format and doesn't scale up in the browser. Best way of testing this is just to resize the browser window. In the link above this works fine in all browsers except ie7 & 8 in standards mode.
By the looks of it, 320 And Up is designed to use responsive media queries in its CSS, which don't work in IE8 and below. There's a script provided with 320 -- respond.min.js -- to enable media queries using Javascript in these recalcitrant browsers, but you don't appear to be including it, which I'm guessing is what's causing your problem.
Check the bottom of the example pages provided with 320 And Up; you'll see the script included there, selectively for the more useless versions of IE. DOMAssistantCompressed and selectivizr are also included; I'm guessing you'll want all of those make IE8 and below work with 320 And Up..
Thanks to #Matt for your comments. Even when I did include respond.js it still wasn't working!
I've spent a long, long time trying to get this to work....
...answer.
I got the latest respond.js from github and it worked like a dream!
Wish I'd have thought about that earlier!
I saw some of the sections related to IE issues in our stackoverflow website but still my question awaits.
In my local server I am running an application which is loading JS and CSS files perfectly and working fine in IE7+ and Firefox. The problem is with IE6.
If running in IE6, able to load small amount of data but not if large data.
Able to find that the complete problem causes with CSS but don't know where I am going wrong in CSS.
I tested my application with w3c validator, it shows some minor errors which can be ignored and everything looks good.
Even using IE Fixes CSS.
Could any one please provide me some ideas, like is there any css debug for IE6.
Thanks in advance...
The Internet explorer developer toolbar may go somewhere to help you. It's extremely useful, although not as good as other browser alternatives. It can be installed on IE6. To access it once installed it's in the "convenient" place of view-->toolbars
Are you are generating a <style> element for every data row? This is common (although I don't like it) when you don't have access to the <head> element or cannot concatenate rules into a single <style> element.
If so, do you have more than 31 <style> elements? IE has a limit on the number of stylesheets, so you might be seeing that problem.
There are a lot of blog posts (and SO question) on this. Here are some of the better ones I could find:
Does IE 8 have a limit on number of stylesheets per page?, Stylesheets Not Loading? 31 Reasons to Hate Internet Explorer and Internet Explorer CSS limits.
I suggest FirebugLite (for IE6), and installing Fiddler.
I don't like Microsoft's font rendering.
I've created a site for a client and the last unticked box on my debugging list is the biggest. (it's not 'live' yet btw so please ignore any other bugs - http://baked-beans.tv/bb)
I'm using font-family to import a non standard web font. It renders fine on Mac, but it looks like sick old man on its last legs on PC.
The biggest irony is that the font is actually ok to read in internet explorer 8. This is the first time I've EVER seen IE beat other browsers in anything. But anyway, the font doesn't look good in FF, Chrome, or Opera, on a PC.
So my solution is to serve different fonts to PC users. There are a lot of css hacks for different browsers, but not for different OS. the php OS detections are really really complex. I'm just looking for something simple like if(PC) do this; else do that;
Any advice would be immensely helpful
Just one other thing... Just wondering if there is a way I could prevent Windows from anti-aliasing type on the Internet? The reason why it looks so bad is because it's trying to anti-alias it, maybe if it left the poor font alone it wouldn't look so bad.
The CSS Browser Selector can target different OS's. :)
No, you can't "kill" anti-aliasing.
But, you could use http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/ for detection.
From what I saw only the headlines are crap so you could as well use http://cufon.shoqolate.com/generate/ for those and make your life easier.
My favorite article on this topic is here:
http://getsatisfaction.com/typekit/topics/typekit_fonts_rendering_horribly_on_windows_based_systems
There is a lot of good discussion including TypeKit developers on the reasoning behind that, and it has a link to an interesting article about using JavaScript to detect whether font smoothing is in use (you definitely can't do it with CSS alone).
http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/
Good luck.