Displaying a message to Internet explorer 8 and Below Users - internet-explorer-8

So I have been working on a site (http://getcours.tk/), recently, It works fine in Chrome (So webkit) and Firefox (So Gecko) but I just tried it out in Internet explorer 8 and Since it doesn't seem to follow CSS3 standards, It is incapable of rendering it properly.
I just want to display a message to users of internet explorer 8 and below (ie9 works) to say that the site will display incorrectly in their browser, and that if they wish to see it properly they should Use a Modern browser.
Really hoping for a hand here, thanks to anyone who can help
-jman6495

It's really simple actually. You can paste this anywhere in your page and everything inside it will only be rendered by IE8 and below
<!--[if lt IE 8]>
//Whatever you want here
//For example, specific css only for IE
<link rel="stylesheet" type="text/css" href="cssIE.css" />
<![endif]-->
Similarily you can use "gt" (greater than) instead of "lt" or any number version you want.

Related

fullpage.js responsive-slides extension question

I'm experimenting with fullPage.js Responsive Slides Extension.
See https://alvarotrigo.com/fullPage/extensions/responsive-slides.html.
Wondering about responsive behavior on my phone: Samsung Galaxy S6.
On this phone, I don't see the site switch to its intended mobile appearance. Specifically, the horizontal rows aren't automatically switching to a completely vertical experience, and the elements aren't resizing.
I do see that site respond accurately using Developer Tools in Chrome and other browsers.
What's up do you think? Or how would you figure out what the issue is? Thanks in advance.
That's because the site is not using the viewport meta tag and therefore the pixels are not the real phone ones.
You can use the following meta tag and see how it works as expected:
<meta name="viewport" content="width=device-width,initial-scale=1">

Set Bootstrap 3 unresponsive for IE 8

it's possible to set the layout of bootstrap 3 in IE8 not responsive as in version 2 using respond.min.js without writing a special css for IE ?
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
Using respond.js is not making responsive bootsrap layout in IE8.
You can check it on
http://getbootstrap.com/examples/navbar/
You can read about respond.js on github:
https://github.com/scottjehl/Respond/blob/master/README.md
The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. It's written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).

Why won't IE8 render?

I'm helping build a site for a client in Adobe CQ5. Due to the preferences of the client I cannot post the source, but we are having trouble with IE8.
When we try to view the site in IE8 the page will not render. When using the dev tools we can browse the HTML and the select tool does successfully highlight elements with the blue outline, but none of them render. The page is simply white. Things render properly in IE7 browser mode but not in IE8 or IE8 Compatibility Mode.
I've run the html through the W3 validator and nothing egregious jumped out. Anyone have any leads?
there must be some javascript error which causing this. otherwise CQ5 render well in ie8
If it works in IE7 but not IE8 you can try adding this to the <head> section
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
This forces IE7 emulation. You can also try playing with the doctype to see if this makes any difference.

IE Mobile conditional comment is read by ie8 and lower

I am developing a responsive site and do use media queries, which are not read by IE8 as well as the internet explorer on windows phone. Therefore I am using conditional comments for these. For IE8 and lower I use the following snippet to include the screen css:
<!--[if lt IE 9]>
...some stylesheets...
<![endif]-->
For windows phone I have to include the css for the mobile resolution and I am using the following snippet:
<!--[if IEMobile]>
...some stylesheets...
<![endif]-->
My problem is that the IE 8 seems to use the stylesheets inside the conditional comment for IE mobile as well, because as soon as I am including the styles inside the conditional comment for IE Mobile, the whole site in IE8 and below crashes.
I also tried this combination:
<!--[if (IEMobile)&!(lt IE 9)]>
But without success. Maybe the idea of the combination is right and I am just making a mistake with the syntax or there is some problem with the IE8 and the rather new conditional comment regarding IE Mobile?
According to this: http://dev.bowdenweb.com/html/ie-conditional-comments.html
You should be able to use this syntax for combining conditions:
<!--[if IEMobile]><![if gt IE 8]> Yo IE 9+ on mobiles <![endif]><![endif]-->

.png images not rendering correctly in IE7, IE8

They look great in FF, Safari, but the social media icons don't render correctly in IE.
http://www.erisdesigns.net/STAGE/ED1.3/
Is this an IE problem, or something to do with how I'm creating the .pngs?
There's a pngfix javascript add-on you can trigger with an IE conditional statement.
PngFix
<!--[if lt IE 7.]>
I think that it's because you use transparency. Although it isn't as clean as the current solution, you should maybe make everything opaque.

Resources