I have a #font-face I am using for a site. It renders fine in everything except Safari, and only in one instance there. The issue fixes itself when I remove display: block.
Anyone have any idea why this is happening & how to fix it?
The exact issue is that the font is rendering 'pixely'.
Thanks in advance.
Use Google web fonts API; it'll save you hours of time and it's designed for cross-browser compatibility. # http://code.google.com/apis/webfonts/docs/getting_started.html
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.
I'm using Font Awesome. Sometimes - and I haven't figured out the pattern yet, unfortunately - the icons aren't working in Safari. When this happens, Safari shows the standard icon for a missing character, the outline of a box.
When I reset the browser, Font Awesome works as expected. And then, after some time, it reverts to not working again.
I'm serving Font Awesome from Nginx. That could be relevant, because I originally served these files without the proper headers, which broke Font Awesome in Safari. I'm wondering if maybe somehow Safari could have cached the non-header versions of the files, and maybe somehow keeps using them even when cache is cleared (maybe it's caching fonts somewhere else? But why would it revert to the broken version?).
Okay, this isn't much to go on I know, but any ideas, has anyone else experienced this? Thank you! :)
Edited to add screenshot of broken behavior:
It's bizarre.
This site works perfectly in all browsers but IE7. In ie7 NOTHING works. Most of the css just doesn't even render. IE8? Fine. Ie9 Perfect. Firefox and Chrome, of course.
Want to hear something weirder? this is a template site i have worked with before. Other sites built on essentially the same template DO work in ie7.
This is why i think whatever it is is simple.
I don't want to paste the code here - it's massive. But i'll give you a link to the site and to the css
site: http://canadianrecovery.ca
css http://canadianrecovery.ca/css/screen.css
Thing is, i have document standard set to ie9 It works fine in ie7 mode with doc standards set to ie9
But i have noticed that most IE browsers don't display default doc standards... this is obviously some sort of issue with IE itself. But it's frustrating.. most end users have no clue how to fix this.
Thanks in advance.
ella
I think I may have found the reason. In your body-style (line 13), you have the following:
font-family: "Times New Roman;
See that unclosed quote? Seems like Chrome, FF, IE9 etc can fix that error, whereas earlier versions of IE read the rest of the CSS as your font-family declaration.
Try Modernizr, it makes a lot of things possible in older/less compatible browsers without a lot of trouble. Try the development version to see if it can help you and compose your own production version targeting your specific needs to minimize the size (and speed) of the javascript library.
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
Thanks everyone. I actually found a solution. Look for a js script called ie7.js and include it with conditional comments.. it solves a LOT of ie7 issues
Firefox does not seem to be completing every aspect of the stylesheet for the site (nsfw text) www.theshandy.com
Firefox seems to have implemented the body styling but none of the class or id styles. Every other browser seems to be having no trouble at all.
After doing some research I have tried fixing problems other people have found. The sheet is directly linked (not called by php). The type is definitely text/css. And I believe it has the correct utf-8 character set.
I am really at a loss.
Thank you very much.
EDIT SOLVED:
It was a rogue apostrophe in one of the early ID styles. Apparently chrome and safari will ignore is and firefox won't and it then refused to load the rest of the stylesheet (creating the idea that the body styles were loading but not others.
Thank you for trying to help!
Check your paths.. you might be using /css/style.css instead of css/style.css.
This could generate this problem.
Weird problem. I update the site CSS sheet and the changes show straight away in FireFox but don't show in IE. Using the Developer Toolbar in both apps the style changes are missing in IE. I've reset the browser cache but no dice.
Perhaps this related question might help you.