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

[zumajoe]

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://www.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:

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

Home


News


About


Work


A longer menu item


Contact




 

[zumajoe]

Wow, ok thanks that solves 80% of my problem. I totally overlooked this (my first HTML5 document).

[Author]

Posts