For my current project (in development), Microsoft IE6 and IE7 will not be supported browsers (big shock I know). So I want my conditional comments to target any IE browser less than version 8 and prevent the user from accessing the site, and offer them alternatives to either, upgrade their browser, or switch to a more modern browser.

Now, before we get started, I must state that I did not spend a ton of time trying to make this aesthetically pleasing. If the site visitor is using IE6 or IE7 to access a website, then they should not be expecting a whole lot… there are no rounded corners, fancy fonts, transparencies, etc.  Just a bare bones message to get the point across.

Step 1 - In the body of the page, right before the closing body tag , I put the following html:

<!--[if lt IE 8]>
<div id="IEredirect">
<div id="IEredirectText">
<p>You are attempting to view this website using an outdated browser.  To view this site, please upgrade your version of Internet Explorer or consider using a more modern browser via the links below.</p>
<br />
<p id="safari">
<a href="http://www.apple.com/safari/">Apple Safari&lt;/a>
</p>
<p id="chrome">
<a href="http://www.google.com/chrome/">Google Chrome</a>
</p>
<p id="firefox">
<a href="http://www.mozilla.com/en-US/">Mozilla Firefox&lt;/a>
</p>
<p id="ie8">
<a href="http://www.google.com/toolbar/ie8/index.html">Microsoft IE8</a>
</p>
</div>
</div>
<[endif]-->


Step 2 – In my linked CSS stylesheet I apply the following styles to the unique ID’s:
/*begin IE redirect*/

#IEredirect {
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
z-index: 1000;
left:0px;
top:0px;
background: url(../images/bgBlack30p.png) repeat fixed center top;
}

#IEredirectText {
position: relative;
width: 500px;
height: 400px;
margin-left: auto;
margin-right: auto;
text-align: left;
background-color: #ffffff;
margin-top: 100px;
border-bottom: solid 2px #000000;
border-top: solid 2px #000000;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
}

#IEredirectText #ie8:hover {
background: url(../images/icon_ie_color.png) no-repeat left top;
}
Step 3 – I put the following images in the above referenced “images” directory:

(don’t forget that last little square there)

Now when someone visits the page, they will see the image below with a 30% transparent black overlay background (in IE7) or a white background (ie6).  If they want to upgrade their browser, all they have to do is click one of the icons listed.  On hover, the icon goes from black & white to color.

Gregg – http://richterwebdesign.com

If you commonly hear people shouting "WTF?" when accessing your web pages, it's likely that they simply want to know, "Where's The Font?".   As in, why is the entire page in Arial, or Times New Roman, or Helvetica, or Verdana, or Georgia...?

1st - a little preachin'.  Stop using images as a replacement for text.  If you have important text like a business name, a primary function, a description of a business or event, etc, making that an image instead of using text significantly hampers your SEO (Search Engine Optimization).  Search Engines like Bing, Google, and Yahoo, primarily use the actual text on your page for SEO.  Images are not text.  Only text is text.  Of course there are times when a text image is absolutely necessary (logos, super-rich graphic design of text, etc), but all of your h tags (h1, h2, etc) should be text.  And that means, don't just hide the text with CSS and put a background image in it's place... search engines don't like this and see it as potentially deceptive.

2nd - go get your font on.  There are a ton of font websites out there with all sorts of cool fonts available for free or a minimal charge (read the licensing agreement for these fonts).  I like sites like dafont.com and/or searching 'font' in places like Smashing Magazine archives.

3rd - the font file types.  For embedding custom fonts on to your web page, there are 3 file types you need to know and love  (.ttf .otf .eot).  In a nutshell, .ttf and .otf are fine and dandy for Firefox, Chrome, Safari, and Opera... but of course, not Internet Explorer.  To embed custom fonts in IE, you need use the .eot file format.  Why?  Because that's what one guy in Redmond decided.

4th - conversion to the dark side. 99% of the fonts you are going to find on the internet are going to be in the .ttf format.  So before we get to writing our CSS you must convert your .ttf files to .eot files so your pretty custom fonts will work across all browsers (using both the .ttf and .eot files).  A quick Google search for font converters will lead you to sites like here or here.

5th - upload. For this example, we'll assume you found a cool font called fancyFont.ttf and have successfully converted to a .eot file. From here, create a folder in your ROOT directory titled 'font' and upload your fancyFont.ttf and fancyFont.eot files to this place.

6th - the CSS. At the top of your CSS doc we are going to specify the @font-face selector like this:

@font-face{
font-family: 'fancyFont'; /*This is the name of the font that you will call later*/
src: url('/font/fancyFont.eot'); /*Calling the font for IE. List this one first*/
src: local('fancyFont'), url('/font/fancyFont.ttf') format ('truetype'); /*non IE browsers*/
}

The above code basically tells IE, hey go look at this URL for my custom font. After that it tells all the other browsers to look for the font on the local machine first and if not found to go to the URL as well.

Quick note on how I start all my CSS docs with a quick little reset to make pages render as universal as possible across all browsers.

1. IE, Firefox, Safari, Chrome etc. all treat margins and padding just a little different from one another… which leads to your pages rendering slightly different from browser to browser. This issue becomes quite apparent if you are using tables (for table data only of course). To reset all padding and margin set the value to zero on the universal selector as follows:

* {
padding: 0;
margin: 0;
}

2. Bullet’s for list’s (unordered in particular) appear different in each browser as well. A list of bullet items in IE will be bulleted with a solid circle, where another browser may show it as a triangle or perhaps a square. I like to set the decoration to none, and then add in my own bullet image if I must have one. To remove decoration from your Unordered Lists, set the following in your CSS:

ul { list-style:none;
}

3. For all my anchor tags (hyperlinks), I again like to set the decoration to none and then specify color, underline, etc. as part of my design.  In particular, I typically do not like the auto-standard for hyperlinks to be underlined or appear in blue, especially if they are in a top-level navigation.  At the top of my CSS, I set my anchor tags as follows:

a {text-decoration: none;
}

a:hover {text-decoration: none;
}

a:visited {text-decoration: none;
}

Then of course if I wanted all anchor tags to appear white on load, but black on hover, I would set the first two as follows:
a {text-decoration: none;
color:#FFFFFF;
}

a:hover {text-decoration: none;
color:#000000;
}

I would love to know more about what other people (you) use as generic CSS resets and if you typically write them in each CSS doc, or if you have a master CSS reset doc that you always point to.

Happy Cascading,

Gregg – http://richterwebdesign.com

1/19 Update… I posted this article on a couple of LinkedIn discussion boards and had no less that 50-ish comments discussing the merits and drawbacks to CSS resets.  While the opinions on this varied greatly, one of the most consistent comments were in regards to the Eric Meyer CSS Reset.  Eric Meyer is widely regarded as the CSS guru.  I have included a link to his site in my links section, or you can click here.