Use Conditionals and CSS
If you have a header
include type file, (or something like the layout
in Rails), just use the IE conditionals:
<body>
<!--[if lte IE 6]>
<div id="ie-warning">This site does not support IE6</div>
<![endif]-->
And then use simple styling in your stylesheet.
Or, if you really want jQuery:
Here is a simple jQuery script that does what you want. Copy this and save it to jquery.ie6.js
:
(function($){
$(function(){
var message = "This site does not support Internet Explorer 6. Please consider downloading a <a href='http://firefox.com'>newer browser</a>.",
div = $('<div id="ie-warning"></div>').html(message).css({
'height': '50px',
'line-height': '50px',
'background-color':'#f9db17',
'text-align':'center',
'font-family':'Arial, Helvetica, sans-serif',
'font-size':'12pt',
'font-weight':'bold',
'color':'black'
}).hide().find('a').css({color:'#333'}).end();
div.prependTo(document.body).slideDown(500);
});
})(jQuery);
And then put this in the head
(after the inclusion of jQuery of course) of your page:
<!--[if lte IE 6]>
<script src="jquery.ie6.js" type="text/javascript" charset="utf-8"></script>
<![endif]-->
DEMO
This demo is set to show in all browsers, but if you include it as I showed between the if lte IE 6
conditional comments, it will only show up in IE6 and older versions of IE.