HTML5 and CSS3 for IE7 and IE8

Question

I inherited a web application where the front end uses new HTML5 tags (header, nav, section tags) and new CSS3 style attributes (rounded borders). The website looks amazing in Google Chrome and Safari.

However, the client now complains the website is broken for IE7 and IE8. Everything is out of alignment and most of the styles do not render.

What is the easiest way to make this website work in IE7 and IE8? Do I have to: a) Apply some hack to make IE browsers accept the new HTML5 and CSS3 features? b) A complete rewrite of the front end?

Answer 1

Try this lovely script (.js) :)
And for rounded corners i use an other script (.htc)

use the 1st:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

use the 2nd like:

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
behavior: url(border-radius.htc);

Happy sitebuilding :)

The original link is no longer active and HTML5shiv has moved.

Now available on GitHub

https://github.com/aFarkas/html5shiv

Answer 2

For HTML5, I recommend Remy Sharp's HTML5 Shim, although to see the effect, your IE users will need to have JavaScript enabled. Basically it exploits an error in IE6/7/8 which allows HTML5 elements to be recognised after they have first been created in JavaScript using the document.createElement function.

For your CSS, there are a few different hacks such as CSS3 PIE that use the "behaviour" property (which is unique to IE) to simulate CSS3 effects. I have personally refrained from these though, since in my experience, they break very easily, and end up being more hassle than they're worth. I instead tend to write my CSS so that it degrades gracefully in IE, so that rounded buttons look square, but still look nice.

Answer 3

You could try css3pie http://css3pie.com/ which would help with the css3 issues.

Answer 4

modernizr http://modernizr.com/ will be a good choice.

Answer 5

To add on to Karl and Alistair, I encountered an issue with CSS3Pie in my site. I used their CSS code from four months ago and the CSS3 gradients were blocking <input type="text"/> fields from showing up in IE7 or IE8. Only when I revisited their site again and saw their new CSS code did it work.

Lesson is always check the plugins websites for most recent code

Answer 6

Regardless of new semantic tags, if you intend to produce the CSS3 effect in IE7/8, you could certainly use asp.Net graphics classes as fallback for IE7/8. some of the effect which can be created using .net graphics are -

Border-radius, linear gradient, radial gradient, box-shadow..

You can create these effect in asp.net page using graphics classes and render that page as an background image of any HTML element. i.e.

<div style="background:url(http://127.0.0.1/index/yourpagename.asp?param1=value1&param2=value2)"></div>

OR

<img src="http://127.0.0.1/index/yourpagename.asp?param1=value1&param2=value2" />

where parameters value are input in terms of output required to create the effect. i.e. height, width, color etc.