So this is the thing. Our website (currently under “House Keeping”), besides having out-dated copy (that we worked on for the launch of the site and then forgot, sound familiar?) looks fine until you see it in versions of IE previous to 7.0.  And even when we want to believe that there are very few people with browsers this old, you go to a client meeting and there you have it, your precious site looks like crap!

So whenever we decided to “take it 2.0″ and add new features like a section to post recipes we cook (recipes?? cooking recipes?? Yes! Besides cooking a lot of design, html, css and cfm, that’s the one thing we do a lot of! So we decided our website to be the best place to share with family and friends).  We said: “Better clean our code and organize the house, before we go adding more rooms.”

Now, my contribution in this post is to share a snippet of code that is making my life very easy in the housekeeping we are doing. If you ever wonder how to make your CSS compatible with previous versions of IE 7.0 without having to modify your design, here’s how you can do it. (Unfortunately I found this snippet a while a go so I can’t credit whomever posted or came up with it, if you are that person let me know! )

Here it is:
<!– Will only be read by IE versions less then IE 7–>
<!–[if lt IE 7]&gt;–>

Place this snippet, below the link of your main style sheet(s).The browser will read those first, and if it is a version previous to IE 7.0 it will start reading your alternative style sheet “mystylesheet.css”. In this style sheet put those rules you want to modify for IE, like a rule that assigns a .PNG as a background for a div and then modify them accordingly.

Here is an example:

A style from your original CSS would look like this:
#div_body {
float: left;
width: 850px;
background-image: url(../images/bg_content_shadow.png);
background-repeat: repeat-y;
padding-right: 4px;
padding-left: 2px;
position: relative;
}

The same style is overwritten for I.E 6 and below like this:
#div_body {
background-image: none);

}