How would you setup a CSS3 fallback in IE for this slanted DIV navigation?

Question

Taken from a tutorial at: http://www.joecritchley.com/demos/slanted-nav/

I can't for the life of me get this to work in ANY version of IE. It only displays the navigation as a normal bulleted list, but I know it must be possible based on some findings from http://css3please.com/ such as:

-ms-transform: rotate(20deg);  /* IE9 */
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand');
           zoom: 1;

Here is the setup that is working in almost all other browsers:

JS Fiddle link: http://jsfiddle.net/zumajoe/9ukdm/

CSS

#main-nav > ul
{
margin-top:50px;
overflow:hidden;
}

#main-nav > ul > li
{
float:left;
font-size:18px;
margin-left:-35px;
overflow:hidden;
padding:20px;
}

#main-nav > ul > li:first-child
{
border-radius:10px;
margin-left:0;
}

#main-nav > ul > li > a
{
-moz-transform:rotate(20deg);
-o-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
background:#bbb;
border-left:1px solid #FFF;
color:#444;
display:block;
height:150px;
margin-bottom:-100px;
margin-top:-70px;
overflow:hidden;
text-decoration:none;
}

#main-nav > ul > li:first-child > a
{
border-left:0;
border-radius:10px;
}

#main-nav > ul > li > a > span
{
-moz-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
display:block;
margin-top:57px;
overflow:hidden;
padding:0 20px;
}

#main-nav > ul > li > a:hover
{
background:#aaa;
}

#main-nav > ul > li.current > a
{
background:#000;
color:#fff;
}

HTML

<nav id="main-nav"> 
            <ul> 
                <li class="current"><a href="#"><span>Home</span></a></li> 
                <li><a href="#"><span>News</span></a></li> 
                <li><a href="#"><span>About</span></a></li> 
                <li><a href="#"><span>Work</span></a></li> 
                <li><a href="#"><span>A longer menu item</span></a></li> 
                <li><a href="#"><span>Contact</span></a></li> 
            </ul> 
        </nav> 

EDIT: Well half the problem comes from IE not understanding the HTML5 "Nav" tag, so changing the <Nav> to <Div> will at least get it to display as normal rectangles in IE.

EDIT #2: The further I get along with this, i'm realizing it could just be easier to use the "skew" CSS3 property. Skew the container, then skew back the span (same as how this rotation is setup). Still have issues with IE 8,7, & 6 however.

Answer 1

I would suggest simply using this: CSS3 Transform to Matrix Filter Converter and put the resulting code in an IE only stylesheet.

I've used it myself and found it works quite well.

As for the <nav> element, well you can use the HTML5 Shiv script to get HTML5 elements to work in IE.

Answer 2

In addition to the <nav> element being unsupported in IE, which you already found out, I would say your best bet is conditional comments. Thus:

<!--[if lt IE 9]>
<style type="text/css">
    #main-nav ul li a span{
        margin-top: 40px;
    }
    #main-nav ul li {
        margin-left: -45px;
    }
</style>
<![endif]-->

Adding that to the code you posted in your question makes it look acceptable, though clearly less sexy than the rotated version.