Solving development problems  |  About this blog

Archive for the ‘outdated browser warning’ tag

Recognize IE6 in HTML

You can detect IE6 using HTML relatively easy and then show warning message that this is an old browser….

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="all" href="your-css-file-only-for-ie6.css" />
<![endif]-->

You can show outdated browser message like this:

<!--[if lte IE 6]>
 <div id="upgradeYoBrowser">
  <a href='#' class="close" onclick='javascript:document.getElementById("upgradeYoBrowser").
   style.display="none"; return false;'>×</a>
  <div class="wrapper group">
   <div class="alert">
    <img src='/images/ie6upgrade/alert.png' alt='Warning!'/>
    <h1>You are using an outdated browser</h1>
    <p>For a better experience using this site, please upgrade to a modern web browser.</p>
   </div>
   <ul id="newBrowsers" class="group">
    <li>
     <a href='http://www.firefox.com' target='_blank'>
      <img src='/images/ie6upgrade/firefox.png' style='border: none;' alt='Firefox'/>
      Firefox
     </a>
    </li>
    <li>
     <a href='http://www.microsoft.com/windows/internet-explorer/' target='_blank'>
      <img src='/images/ie6upgrade/explorer.png' style='border: none;' 
       alt='Internet Explorer'/>
      Internet Explorer 8
     </a>
    </li>
    <li>
     <a href='http://www.apple.com/safari/download/' target='_blank'>
      <img src='/images/ie6upgrade/safari.png' style='border: none;' alt='Safari'/>
      Safari
     </a>
    </li>
    <li>
     <a href='http://www.google.com/chrome' target='_blank'>
      <img src='/images/ie6upgrade/chrome.png' style='border: none;' alt='Get Google Chrome'/>
      Google Chrome
     </a>
    </li>
   </ul>
  </div>
 </div>
<![endif]-->