My fluid layout works everywhere but in IE! How to fix?

http://www.teamassociated.com/downloads/webapp/fluid.html

If you test the above layout in various browsers and the iPhone, you’ll see the layout works fine. But it doesn’t resize in IE. At 800px, the left column should disappear and the right column should move under the middle column.

Here’s the CSS for the 800px switcharoo:

/*  -------------------- DESKTOP SMALLER SCREEN ----------- */
@media screen
and (min-device-width : 400px) 
and (max-width : 800px) {

body {
text-align: center;
min-width: 400px;
}

#wrapper {
    width: 800px;
}

p {
    font-family: Helvetica, Arial, sans-serif; /* prevent type from getting tiny */
	font-size: 100%;
}
#header {
margin-bottom:0;
}
#col1
{
 visibility:hidden; height:1px;
}

#col2
{
	clear:both;
	width: 100%;
	margin-bottom: 10px;
	margin-left:0;
	border-right: 0;
}

#col3
{
	clear:both;
	width: 100%;
	margin-bottom: 10px;
	margin-left:0;
}
}

What are we supposed to do to get IE to understand the @media queries? I’ve searched Google and read many pages, incorporated several techniques, and none of them worked for me.

You can’t make legacy IE understand media-queries because these browser versions do not know what they are. You can either serve IE with a fluid (better) or fixed width or you can use Javascript.