1

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.

nlemmon
  • 25
  • 2
  • 8
  • 3
    This question is a bit too broad as-is. It would help if there were specific DOM and style examples of the behavior you want to correct, along with what you've tried (assuming you've done more than including other libraries). – Gabriel Isenberg Feb 21 '14 at 19:32
  • looks like you're trying to use RGBA colors or some Opacity on images. Either use PNGs with opacity baked in or look into opacity: filter() for IE – geedew Feb 21 '14 at 21:22
  • Thanks for the help, everybody. I am going to look in to the suggestions you gave me and see what I can come up with. – nlemmon Feb 22 '14 at 17:05
  • Do any of you have tips on methods of testing on old versions of IE? Having difficulty installing IE 7 or 8 on Windows 7 and 8. – nlemmon Feb 22 '14 at 17:05

2 Answers2

1

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!

Community
  • 1
  • 1
Aamir Shahzad
  • 6,683
  • 8
  • 47
  • 70
0

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]-->
anderezekial
  • 56
  • 6
  • You know, now that I think about it, I believe the issue is probably a lot of usage of 'max-width.' That is CSS3, right? – nlemmon Feb 21 '14 at 19:34
  • 1
    @nlemmon [`max-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) is actually CSS 2.1. IE8 and lower just has sporadic support for CSS2 stuff. Big table of what is supported at http://caniuse.com/ – SlightlyCuban Feb 21 '14 at 19:45