giving IE html5

Discuss general web development questions. Help others and get help from others.

Moderator: kfury77

giving IE html5

Postby mapleleaf » Fri Mar 18, 2011 11:31 pm


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
User avatar
mapleleaf
 
Posts: 121
Joined: Thu Oct 14, 2010 2:21 am
Location: Ashcroft, BC Canada

Re: giving IE html5

Postby kfury77 » Wed Mar 23, 2011 11:24 am

thanks for the CSS3Pie link - looks like a great way of adding CSS3 effects to earlier versions of IE.
User avatar
kfury77
 
Posts: 97
Joined: Mon Jun 13, 2005 11:55 pm
Location: Osaka, Japan

Re: giving IE html5

Postby mapleleaf » Wed Mar 23, 2011 12:34 pm

kfury77 wrote: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;
}
User avatar
mapleleaf
 
Posts: 121
Joined: Thu Oct 14, 2010 2:21 am
Location: Ashcroft, BC Canada


Return to Web Developer Talk

Who is online

Users browsing this forum: No registered users and 1 guest

cron