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 :)
Related
I'm making an old website with HTML. I used the reset.css and I can see this perfectly on the web (http://www.ceachile.cl/revista/) with Chrome, Firefox and IE10, but my client can't see some elements properly. I don't know what else can I do to fix this table that is in a wrong place. Here's a folder with a lot of screenshots of the site in many browsers and OS.
Some snapshots of what the website looks like under various browsers can be found here
You have to check with elements of HTML and CSS each of the browsers support. Trident has historically been behind in implementing a lot of newer features. If you aim to support older browser, you have to look at their documentation and write code based on what they can handle.
Take a look at http://msdn.microsoft.com/en-us/library/bb250496(v=vs.85).aspx for ie7.
If you know your client's OS and browser version, you can use a service like www.browserstack.com to test your website in this environment and debug it with the usual developer tools.
I am using two Google Web Fonts at my website. They are Roboto Slab and Fauna One. They look good in latest Mozilla Firefox and IE10 but for some reason they look horrible in Google Chrome.
They are linked to my website as follows:
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
It took me a while to realize that Google Chrome has a problem with web fonts and that it renders them poorly. I am wondering if there is solution for this?
What if I download those two font types and embed them into the main directory of my website and then call them through CSS via #font-face property? Would Google Chrome in that case render those fonts nicely or I would still have the same problem and poorly rendered fonts???
Or there is some other solution for this issue?
Thank you all!
I believe I saw some bug report for Chrome where it was mentioned that this will be fixed - but I'm not 100% sure. I believe that it's not actually 100% the fault of Chrome...
My understanding is that the problem is to do with the order in which font types are presented in the #font-face directive. So, Chrome handles more than one type but not all types will render at equal quality. Apparently, Google actually doesn't serve the fonts in the right order from fonts.google.com - somehow...
In the end I found that, with Roboto at least (which I'm also using on a project), it is available for use on Font Squirrel (and open sourced under the Apache 2.0 license) - so you can download it here: http://www.fontsquirrel.com/fonts/roboto (download the Webfont Kit for full cross-browser font support) - you lose the CDN goodness of having it hosted on Google's servers if you use it from your own web server but, IMHO, I'd rather lose a few milliseconds than have to deal with such terribly rendered text...
I can't help you with Fauna One, unfortunately - it doesn't appear to be listed on Font Squirrel - perhaps you can find it on another font site? Or another similar font which is available on font squirrel?
From a web browser perspective (Chrome being the browser in question), Chrome 35 in Windows has difficulty rendering some fonts, like Roboto, without some horrible artifacts that make the font difficult to read.
There is a feature called DirectWrite that will be included by default in future versions of Chrome that will fix this problem. You can enable it now in Chrome 35 by going to chrome://flags in your browser URL bar. You can Enable DirectWrite (experimental in Chrome 35), close your browser, open and try again.
Just to be clear, I discovered this problem on Chrome 35 for Windows. DirectWrite is a DirectX API for rendering fonts in Windows. Chrome by default uses Windows Graphics Device Interface (GDI) which seems to be the problem.
See this article
Occasionally users report that the text on https://squareup.com looks like gibberish (or garbled) to them… however we’ve been unable to reproduce this.
Users report to be using either Chrome or Safari on Windows, so this may be an issue with webkit.
Here are a three screenshots that have been taken of this occurring on https://squareup.com:
The pricing page on our current site:
Easily recreated by using an older version of Windows as well as an older branch of Chrome. Seems like Chrome 4-8 have this issue. For testing purposes, boot into XP with Chrome 4. The problem lies in text-rendering: optimizelegibility. This is a reported bug in older Chrome versions when using optimizelegibility with #font-face when using woff fonts. If you can reproduce the issue, try taking out vertical-align: baseline and see if the rendering is still garbled.
It may be something related to the character encoding. Try explicitly specifying the encoding by putting this in the <head> of the page:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
it's a bit of a stab in the dark, but have you considered re-generating the #fontface files, just in case there's some form of corruption which only surfaces when viewed in certain WebKit browser versions?
If you have one, try running a TTF through the FontSquirrel fontface generator:
http://www.fontsquirrel.com/fontface/generator
Maybe its the custom fonts acting up? When I view your site in firefox it says its in Helvetica Neue but in Chrome it says ag1, agb
I don't have a surefire answer for you, but it looks like you're using the Modernizr class and looking at your html node in Chrome it has the js fontface class applied to it, which suggests custom font-face problems.
they probably have clear type turned off. http://www.microsoft.com/typography/cleartype/tuner/step1.aspx
It seems to me that the texts in question have text-shadow applied to them. This is pretty bleeding-edge, experimental, demanding, unreliable stuff, for little if any visual value (eg white shadows on a white background).
There is a simple answer to this - your css code is representated prior to your server side processing. I bet your using some type of css php or repository for serving up your style/css/markup/jquery or external source for that page.
I'd suggest you put in some wait states and checks for post process or check your ajax/xajax methods. :)
I hope that helps.
I had same issue and figured out that the problem was with font-face. Among the multiple font source files second preference was for "svg", changed to truetype solved the issue.
I meet a problem that my page works well in firefox and chrome(almost the same look and feel) but very bad in IE. It's time consuming to adjust the differences. Is there any research has been done already to tell the differenceS, or any automation tool to examine the uncompatibilities?
BTW: which tool you guys are using when debugging in IE(like firebug for IE)?
Your best starting point is to always use some kind of "reset mechanism" like Eric Meyer's CSS Reset or framework like HTML5 Boilerplate, they help in reducing differences between browsers (not all, but most of it). If this is not possible (project is already in finishing phase, etc.) you can always ask questions here, check Position Is Everything for description of bugs, Quirks Mode, SitePoint reference and various other sites (Google is your friend :)). Hope this helps.
There is "debugging" tool for IE - IE Developer Toolbar - but it's usefulness can't compare to that of Firebug, Dragonfly and such. IE8+ does have better support for debugging, though… There are some articles that suggest using Visual Studio, but I haven't tried it. Mostly it's just trial and error with IE :).
ie7-js is a JavaScript file that automatically fixes many Internet Explorer bugs for all versions. Works like magic.
For fast and better results in IE you can use CSS Hacks for adjusting the HTML elements.
For IE we have IE Developer AddOn
you can download it here : http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535
Welcome to the tiresome world of IE.
IE8 has some version of developers tools, hit F12 on your keyboard and it will pop up. (not present in 6&7)
There are many documented bugs in IE, a simple Google Search would help you out better, but a lot cannot be accounted for until you have your site working in FF.
What most developers I know do is to make the site in FF, make small changes for Webkit browsers then go over to IE (not including 6) and debug.
In my experience there really is no way to tell what IE is going to mess up next, so you'll probably just have to deal with it as it happens.
I have a blog, www.realcanadianenglish.blogspot.com. I use Firefox to write it. Sometimes I check the blog using Internet Explorer. With the later it shows a gap between the picture and the text sometimes. Can I change the HTML code to fix this? Why is there a difference between the two: Explorer and Firefox?
Internet Explorer can have extra padding on some elements. I suggest you try to include a CSS Reset file first and then your own CSS file.
Here's a good Stackoverflow question about CSS Reset files
The blog looks fine on IE8. If you're having a problem with it, I would recommend running IE8 and using the debug tool provided (hit F12). You can dynamically change the HTML and CSS from right inside the browser. It's faster than uploading a new template every time you want to test a change.
You are refering to the IE Model Bug
In most cases the issue will be with IE and, in those cases, it's sometimes best, or at least convenient, to just serve IE a line or two to bring it into line with the other far more modern browsers with "conditional comments". These comments will be recognized only by IE but wind up allowing you to include styling or html that won't affect other browsers. They are easy to use but have a few variations based on which version of IE you are targeting. Here is the link explaining them all: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Here is the best place to learn about IE CSS bugs: http://www.positioniseverything.net/ie-primer.html