Following on from this week’s earlier post about problems with iWeb sites displaying in Internet Explorer I decided to experiment with some conditional comments and a bit of CSS and came up with the following bit of code to add to your iWeb sites. The end result is a colored rectangle that will appear on your iWeb site (wherever you place the HTML Snippet) whenever an IE user visits your site. Within the rectangle is a warning that their browser is incompatible with your iWeb site.
To be on the safe side I have also included a few links and suggestions for other browsers that they could download and try.
Much of the code is customizable, so if you are not happy with the color of the rectangle, the border or font you can change it along with the actual text as well. Anything that I have highlighted in red can be changed to suit your site (although it would be better to have the warning standout)
To get this warning onto your iWeb site, open up iWeb and go to the page where you want it to appear.
Insert a HTML Snippet and paste in the code that is shown below; press apply. That’s it.
You will probably now say something along the lines of ‘how do I know it’s working there is nothing showing in iWeb?’ and that would be a good question. The reason it doesn’t show in iWeb (or Safari for that matter) is because we have used a conditional comment. The part of the code:
<!--[if lt IE 8.]>
detects which browser is being used to view the site and if it is IE7 or earlier then it will display the message. If it isn’t, then the message will stay hidden.
If you want to have a look at how the warning displays (perhaps to edit the colors or font) you can remove the portion of the code at the end:
Remember to put it back before you save your page otherwise it will show up no matter what browser you use.
<!--[if lt IE 7.]> <p style="border-top: 1px solid gray; border-right: 1px solid gray;border-left: 1px solid gray; background: #ffffcc; color: #000; font: 1.5em; padding: 5px; width: 760px; text-align: center; margin: 0;"><b>Sadly this site is not compatible in your choice of browser.</b></p> <p style="border-left: 1px solid gray; border-right: 1px solid gray; border-bottom: 1px solid gray; background: #ffffcc; color: #000; padding: 5px; width: 760px; text-align: center; margin: 0;">We recommend that you upgrade your browser and suggest either<a href="http://www.getfirefox.com">Mozilla Firefox</a>or<a href="http:// www.apple.com/safari/">Safari</a>.</p><![endif]-->
As a quick summary of things you can edit:
The borders are obviously self-explanatory, you can change the width of them from 1px, if you would rather have ‘dotted’ or ‘dashed’ instead of ‘solid’ then you can change that as with the color; you can use hex codes (ones that begin with #) rather than ‘gray’.
You can change the font size (I have set it to be slightly larger than normal (1em) so that it stands out a bit) as well as the background color from ‘#ffffcc’. The ‘color:’ refers to the color of the font and of course you can change that too.
Finally you can change the wording do the message if you like as well. I tried not to be too harsh, but to offer a subtle hint that IE is rubbish.
As a final aside, I have tested this and it does work. I entered the code in an iWeb site, published it to a folder then put the folder on to a USB stick. I then took the USB stick into work (where we still use IE6???) and viewed it through FireFox 2 and 3 as well as IE 8, 7, 6 and 5.5. The message appeared only in the relevant versions of Internet Explorer.
If you need anymore help with the code editing, leave a comment or drop me an e-mail.