Welcome Text

  The life of a designer is a life of fight: fight against the ugliness.

Wednesday, 1 May 2013

How to Support CSS3 in IE and other IE Related Tips.

The main problem of use CSS3 in website is IE6 to IE8 does not support CSS3 property.But now I will give some tips so that CSS3 will work fine in IE browsers.

TIP 1 : (Support CSS3 in IE)

Go to this website and download the package. (www.css3pie.com)
Here is a small example to quickly apply css3 border-radius properties,
Add the PIE.htc in the css folder,Apply the following styles to your class.
CSS3 and IE

.rounded-corners {     
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;    
   border-radius: 20px;    
   behavior: url(css/PIE.htc);

After the inclusion of this behaviour property CSS3 tags will work on IE6, IE7, IE8.

For more details you can visit www.css3pie.com for detailed examplesand documentation.

TIP 2: (Support Rounded Corner in IE )

We can include a java script file for rounded corner support in IE.The javascript file name is curvycorners.js .
This javascript file will work for those browsers which are not supporting 'border-radius' and will automatically make the divs rounded corner.
Example of the CSS is

#Rounded_Corner {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

But to make it working in IE, you have to include 'curvycorners.js' file in your html page.
<script type="text/javascript" src="curvycorners.js">

TIP 3: (Support Blink text in IE)

IE don't support <blink> tag,Javascript function blink() or text-decoration:blink.
So it's very difficult to add blink text in IE browser.
But I am shareing some tips for add blink text in IE browser.For that you have to add a javascript inside of head tag and then write the text inside of <blink> markup.

Code :
Add the following javascript inside head tag.

function Blink() {
 var blink = document.all.tags("blink");
 for (var count=0; count<blink.length; count++)
 blink[count].style.visibility = blink[count].style.visibility == "" ? "hidden" : ""

function BlinkStart() {
 if (document.all)
 setInterval("Blink()",500)//The speed of the blink is 500

And in HTML we have write text inside a blink markup.Like -
<blink>This text will blink.</blink>

If we want we want to change the blink markup to anything else.For that in javascript we have write that tag name.Like

var blink = document.all.tags("yourTagName");
Then in HTML
<yourTagName>This text will blink.</yourTagName>

Thanks for reading this blog.Hope you enjoy it.Follow this blog to get updated about design stuff.