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

By : Joe
Source: Stackoverflow.com
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.

By : Joe


Answers

In addition to the



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



This video can help you solving your question :)
By: admin