How to make IE8 display my custom icon font with CSS generated content - css

I've put up a test page illustrating my problem : http://www.heliopsis.net/var/fontcustom/
I've created a custom font with help from the awesome http://fontcustom.com/ but I have issues displaying it properly in IE8.
It seems that IE8 can use this font with HTML entities but not with CSS generated content. Even more puzzling, it sometimes manages to show the glyphs but loses them on page reload...
Does anybody know what's going on here ?
Here's a screenshot of what I see on IE8 :

In general, generated content doesn't work quite as well as it should (what does?) in IE8.
I played around a bit with your test page, and you might want to check that you aren't getting dumped off into IE8's compatability mode for IE7 or (even worse) Quirks Mode. Both of those seem to break the custom font, but I see it perfectly fine when IE8 runs as IE8.
To ensure that IE always gives to the most recent cababilities if possible add the
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
meta to your header. Also, use the develper tools for IE8 to make sure that your font is being loaded when you see the issue.

Related

Bootstrap 3 col-xs-.. overwrites -sm -md etc.. in ie8

I was testing a page in ie8 and it occurred to me that no matter what resolution it always uses col-xs-.. classes to size content, therefore always looks like mobile version of the website, but stretched out. Is there a way to force ie8 to respect col-sm-.. col-md.. col-lg-.. classes?
I had the same issue once I was working with my site.
IE8 and below do not support media queries.
Include respond.js in project.
and then all you need to do is to add this meta tag in your page.
<meta http-equiv="X-UA-Compatible" content="IE=edge,IE=10,IE=EmulateIE10,IE=9,IE=EmulateIE9,IE=8,IE=EmulateIE8,IE=7,IE=EmulateIE7" />
hope this would solve your issue

Winnovative pdf converter design issue?

we are using PDF converter from Winnovative. Recently our browsers were upgraded to IE10 from IE7. hence the html css design of the pages being converted to PDF are distorted. Using the meta http-equiv="X-UA-Compatible" content="IE=7" the aspx looks good in IE10 but the same page when converted to PDF is not in the same way. How can i make the Winnovative use the browser emulation of the aspx page. Thank you...
You're going to have to fix your CSS with a different objective in mind, I'm afraid. Winnovative is based off WebKit, which is the same rendering engine as Chrome and Safari. If your page displays correctly in Chrome and Safari, it will display correctly in your PDF.

HTML5 lining up in Firefox and Chrome but not at all in IE

http://www.grossmag.com/2012/september/home.shtml
This link works in both Firefox and Chrome. I am not sure why it won't line up correctly in IE. I am trying to convert from old style tables/td's/tr's and this will be great if I can find out why it isn't lining up in explorer.
Sounds like your site is being viewed in compatibility mode in IE. This can depend on the DOCTYPE of your document.
To cause IE to display using the default mode of the current version, use the following META tag
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
This will not fix the site for IE7 (for example). If you wish to do that, then you will likely need to create custom CSS rules for older browsers

Browser Mode and Document Mode in IE

In IE9 Browser, a page is not displayed properly. Using developer toolbar I have found the following screenshot in which it displays
Browser Mode:IE9 Compat View
Document Mode : IE7 standards
If I force the browser to
Browser Mode : IE9
DOucment Mode : IE9 Standard
Then it display properly.
How can I show the page properly without forcing the browser to IE9 mode.
Ah... Internet Explorer didn't support HTML5 until IE9. Add this to the header:
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Also, add an HTML5 reset style sheet like this one:
http://html5doctor.com/html-5-reset-stylesheet/
It looks different in the emulated version of IE7 because you wrote it in HTML5, and IE7 was developed before HTML5 was even an apple in the eye of the W3C.
Be careful using hacks such as the one prescribed in the answer above. It is better to understand each bit of code you add to your site.
It is also important to remember that every additional document, hell every keystroke you add, creates a greater load on the server and browser, which increases your load time.

fixing ASP.NET website that works in IE6, to work in IE8

I need to fix a ASP.NET website that works in IE6, to work in IE8 browser. I added the EmulateIE7 http header to IIS6 as short term fix, but still the pages are not displayed correctly. the web app was initially designed and developed for IE6, now we are upgrading to IE8, so is there any quick fix available for IE6 website to display correctly in IE8? I thought the EmulateIE7 works for both IE7 and previous versions as well, is that not correct?
regards,
Rama
I can't remember exactly what level of CSS IE6 uses. You could maybe try telling IE8 to render the page as IE5 did by using the following META tag in each page:
<meta http-equiv="X-UA-Compatible" content="IE=IE5" />
If this is site wide, then add it as an HTTP header in the web server itself.

Resources