giving IE html5

[mapleleaf]

The biggest problem that one experiences in web design with/for html5 is without a doubt IE.

Therefore, I may have mentioned this in a previous posting in the forum, one can use DOM to overcome this; as follows:
I place the following just above the closing head element( </head> )

Code: Select all

                             <!-- this is to give IE html5 tag info -->
        <!--[if IE]>
      <script>
        document.createElement("header" );
        document.createElement("footer" );
        document.createElement("section");
        document.createElement("aside"  );
        document.createElement("nav"    );
        document.createElement("article");
        document.createElement("hgroup" );
        document.createElement("time"   );
      </script>
      <noscript>
         <strong>Warning !</strong>
         Because your browser does not support HTML5, some elements are simulated using JScript.
         Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
      </noscript>
    <![endif]-->


You could of course change <!--[if IE]> to <!-- lt IE9><!--[if IE]> which then will cover all IE that are not IE9.

You can also give IE a limited CSS ability by adding the following:
check out this link http://css3pie.com/

makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

enjoy

mapleleaf

[kfury77]

thanks for the CSS3Pie link - looks like a great way of adding CSS3 effects to earlier versions of IE.

[mapleleaf]

thanks for the CSS3Pie link - looks like a great way of adding CSS3 effects to earlier versions of IE.

You're welcome and enjoy

I use it alot on my web site particularly with CSS gradients, rounded corners.

feel free to visit and look at the code, http://www.mirana.net

Btw, I am excluding IE6 from my web site so this will only be applicable for IE7 and IE8.

here is an example in using it.

Code: Select all

.button:hover, .button1:hover, .button2:hover, .ibutton:hover, .mbutton:hover {
     color: #d7e2ff;
     background: -moz-linear-gradient(0% 100% 90deg,  #333, #252525);
     background: -webkit-gradient(linear, 0 0, 0 100%,from(#333), to(#252525));
     background: linear-gradient(#333, #252525);
    -pie-background: linear-gradient(#333, #252525);
     behavior: url(PIE.htc);
     border-radius: 6px;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
      -moz-box-shadow: 2px 2px 2px #000;
        -webkit-box-shadow: 2px 2px 2px #000;
        box-shadow: 2px 2px 2px #000;
     font-size: 12px;
     font-weight: bold;
     line-height: 1;
     text-align:center;
     padding: 10px 0;
}