Are you sick to the back teeth of having to design/develop to the standards of Internet Explorer? Well now it's your chance to tell them what's what, in the simplest way imaginable. In fact, it's so simple, you'll kick yourself...
It utilises CSS and conditional comments to load a different stylesheet for IE users, which displays them a polite message, urging them to get Firefox perhaps.
Firstly make a file named index.html and add the following:
<html>
<head>
<title>IE Message</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="iestyle.css" /><![endif]-->
</head>
<body>
<div id="ie_message">Hello IE users,get a decent browser!</div>
<div id="box">Everyone should see this!</div>
</body>
</html>
This is the basis of the page. You can see the conditional comments which have purposely been put after the link to the general stylesheet. As you can see it is very basic, and the only message that example will display is "Hello IE users,get a decent browser!" in Internet Explorer. Your page can be as detailed as you wish. Put links in there to newer versions of IE, links o the FF site, all sorts!
Now for the CSS
Here we will create the stylesheet "style.css". This stylesheet will be used in all browsers, even IE.
body{
color:#ff0000;
font-family: sans-serif;
}
#ie_message{
display:none;
}
#box{
color:#0099ff;
border:1px solid #0099ff;
}
This will hide the IE Message div, so users running anything but IE won't be bugged by a messgae that doesn't even apply to them. There are also the style definitions for the rest of the page.
Finally for the Internet explorer stylesheet. This will make sure that the message gets displayed in all versions of IE. Create the stylesheet "iestyle.css" and fill it with the following:
#ie_message{
display:block !important;
}
The "display:block;" will ensure the message gets displayed, and the "!important" will over-ride and styles defined elsewhere, such as the "display:none" that was defined in the default stylesheet "style.css". See a live demo
here.
The advantages of using this method over say JavaScript browser detection is the fact that you can add as much detail and styling as you like to your message, which, when done with JS, will leave you with cumbersome code that may not even work. Secondly, this method will always work, whether JS is disabled on a users browser or not.
Hope that was useful, post a link if you decide to implement it.
Harry!
Guest poster for the Graphic Design Blog
