How annoying!  You just made the perfect web page and it looks great in Firefox 3, but it looks broken in IE 7.

You are not alone.  Even though Microsoft has improved IE 7, there are still areas where it is not standards compliant.

What can you do?  Well the easiest thing to do is to use Conditional Comments in the header of your pages to fix the broken code.  Take a look at the source code for this page:

http://craftwebproject.com/unit1/index.html

In the header area you will see a “Conditional Comment.”  That’s what you need.

The CC calls an additional style sheet that is applied after the normal style sheet.  In this extra style sheet you can address IE’s special needs.

Here is some decent info on how to make all this work for your own pages:

http://reference.sitepoint.com/css/conditionalcomments

Of course even after you know how to do a Conditional Comment you still have to figure out what you have to do with the standards compliant styles you have in your style sheet to change them (make them non-standard) in the additional style sheet that is called by the Conditional Comment.  You can always figure out something eventually, but it’s extra work.

Why bother?  On the Mesa College website we see the following browser breakdowns:

• Firefox 30%
• Safari 7%
• IE 62%
• Other 1%

Internet Explorer users are moving more and more to IE 7, but there are still some IE 6 users out there.  If you want to take the time you can have more than one Conditional Comment. In that case your code could say, “If this is IE7 call this extra style sheet. If this is IE6 call this different extra style sheet. If this is IE 5 call this also different extra style sheet.”

Even though it’s possible, I don’t bother to do Conditional Comments for IE6 or 5 because they are not worth my time in a web design class. If my students are still on those old browsers, I want them to upgrade to IE7.  However, if your company has lots of IE 6 installed, you may have to compensate for the older browser as well.

All this has an impact on your work flow.  You should start in FireFox and use all the web design tools that are available for that browser such as the Web Developer’s Toolbar and FireBug.  When your code works in Firefox, your code will probably work perfectly in Safari and Opera as well.  Then you need to look at the code using IE and see if everything still works.  Many times everything is fine; however, sometimes things are messy.

Since Conditional Comments only work on IE, you have to do them last.  If you make your pages work for IE from the start, your code may be incompatible with FF and Safari — and there is no such thing as Conditional Comments for them. They don’t respond to Conditional Comments.  Why should they?  They are supposed to ignore comments because the standards say comments should be ignored (grin).  So Conditional Comments are only for IE, and you do them last.

I am looking forward to IE8.  MS promises to come much closer to the standards on their next version of IE.  We’ll see…

…Bill