I am a relative noob at graceful degredation, and wanted some tips on a site that just went live. I know that at this point the layout is completely broken in IE 8 or lower, and wanted to see how much I could do to make things work without a massive overhaul.
www.unccti.org
On IE 8, for example, it looks like:
http://unccti.org/unc-cti-ie8.png
It is supposed to look like:
http://unccti.org/unc-cti-modern.png
The main issue is that the content is completely illegible on older browsers, and some users have actually mistakenly believed this is how the site was intended to look in order to be perceived as 'stylish.' I have included a script to notify users when their browser is out of date, but I want to at least see if I can get this mildly functional on IE8. I am assuming 7 is a lost cause.
What I have tried in addition but without results:
- normalize.css and
- HTML5Shiv
Thank you for your help.
Its not much hard to tackle IE8 there are lots of ways to achieve a decent look for IE8 moreover, your website layout is quite simple to get it done.
I see two Issues which are making website look bad in IE8
1) Some html5 tags
2) Some CSS3 Properties
Add below to head tag of your website;
<!--[if lt IE 8]>
<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]-->
Respond.js Usage
I hope website will look much better in IE8. Moreover, you can add a custom stylesheet for IE8 and can make things good in that;
<!--[if lt IE 8]>
<link href="css/for-ie8-only.css" rel="stylesheet">
<![endif]-->
Last but not the least i recommend to use Modernizer. If you are using html5/css3.
You can check HTML5 & CSS3 Support (In different browsers) to what is supported in which browser.
A relevant question like yours below.
how to make css3 and html5 compatible website for all browsers including IE7 and later
good luck!
I'm not sure about IE7, but I think you can get decent support for IE8. I have found in my own personal experience that most of the issues with IE8 stem from lack of support for certain CSS features.
I looked at your site and see that you are using CSS features that arn't supported in IE8, such as :nth-child.
Here is a list of feature support - http://www.standardista.com/css3/css3-selector-browser-support/
My solution was to add an IE8 specific stylesheet and javascript file. I would include these after all other included files, so they are applied last. Then I would override specific elements as needed. I would use the javascript file to correct issues as needed that couldn't be fixed with the CSS file.
<!--[if IE 8]>
<link rel="stylesheet" href="/css/ie8.css")" type="text/css" media="screen">
<script type="text/javascript" src="/js/ie8.js")"></script>
<![endif]-->
