Tuesday, October 23, 2012

How to tell users IE is incompatible

Internet Explorer is Microsoft's web browser. It's the second most popular in the world, but unfortunately, its web standard support is extremely limited. Fortunately, its easy to tell users to upgrade. 
For IE6
IE 6 supports almost nothing, so don't be afraid to tell users to upgrade. It doesn't support Google CSE, or any advanced CSS. Here's how to tell users to upgrade IE 6. I know it says IE 7, but it won't do any warnings in IE 7. Insert this code between the <head> and </head> tags.

<!--[if lt IE 7]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'> <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div> <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'> <div style='width: 100px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; float: left; font-family: Arial, sans-serif;'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div> <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>The browser you're using is slow, cumbersome, and outdated. <a href="http://opera.com">Click here</a> to get an up to update your browser easily or choose one of the links at right.</div> </div> <div style='width: 100px; float: left;'><a href='http://www.opera.com' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYSwsZe3Taot9flGWq3Tka26n4SiWRFTHkse5dLsk19wwCkFjJb_JfrhNAdwnnPuktxNnYz6YWGJZDRmvq49IzYfUkAVUOb8YcocPzBhg1ekHDDHnUe__bRCx58FgRzcow-ViOU2XQFvk2/s1600/opera.jpeg' style='border: none;' alt='Get Opera 12'/></a>or get <a href="http://maxthon.com">Maxthon</a> <a HREF="http://mozilla.org/firefox">Firefox</a> <a href="http://dragon.comodo.com">Comodo Dragon</a> <p><a href="http://apple.com/safari">Safari</a> <A href="http://coolnovo.com">Coolnovo</a></div> </div> </div> <![endif]-->

For All Versions of IE NOT RECOMMENDED.

Insert between the <head> and </head> tags

<!--[if lt IE 9]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'> <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div> <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'> <div style='width: 100px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; float: left; font-family: Arial, sans-serif;'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div> <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>The browser you're using is slow, cumbersome, and outdated. <a href="http://opera.com">Click here</a> to get an up to update your browser easily or choose one of the links at right.</div> </div> <div style='width: 100px; float: left;'><a href='http://www.opera.com' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYSwsZe3Taot9flGWq3Tka26n4SiWRFTHkse5dLsk19wwCkFjJb_JfrhNAdwnnPuktxNnYz6YWGJZDRmvq49IzYfUkAVUOb8YcocPzBhg1ekHDDHnUe__bRCx58FgRzcow-ViOU2XQFvk2/s1600/opera.jpeg' style='border: none;' alt='Get Opera 12'/></a>or get <a href="http://maxthon.com">Maxthon</a> <a HREF="http://mozilla.org/firefox">Firefox</a> <a href="http://dragon.comodo.com">Comodo Dragon</a> <p><a href="http://apple.com/safari">Safari</a> <A href="http://coolnovo.com">Coolnovo</a></div> </div> </div> <![endif]-->

2 comments:

Feel free to comment. Keep it nice, polite and on topic. You may link to a site if it contains content relates to the content of whatever post you are commenting on. You may link to a site that only uses, for example, HTML5 video. Remember, on topic!