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:
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]-->
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!