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

HTML & CSS
1

Taken from a tutorial at: Imageless CSS3 slanted navigation • Joe Critchley

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 CSS3 Please! The Cross-Browser CSS3 Rule Generator 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

<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>
2

Have you added the html5 shim because iE8 and under don’t understand the html5 elements otherwise.

3

Or you could do something simpler like this.:slight_smile:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
ul {
    margin:0;
    padding:0;
    list-style:none;
    overflow:hidden;
    height:30px;
    position:relative;
}
li {
    display:inline;
}
a {
    color:#444;
    text-decoration:none;
    float:left;
    background:red;
    line-height:30px;
    height:30px;
}
span {
    border-top:35px solid red;
    border-left:15px solid #fff;
    display:inline-block;
    vertical-align:top;
    margin-right:30px;
    margin-top:-2px;
    vertical-align:middle;
}
b {
    border-top:35px dashed transparent;
    border-left:15px solid red;
    margin:-2px 0 0 20px;
    position:relative;
    vertical-align:middle;
    display:inline-block;
    left:14px;
}
* html b{margin-right:-20px}
*+html b{margin-right:-20px}
* html a{line-height:0}
*+html a{line-height:0}

a:hover,.current a{background:blue;color:#fff}
a:hover span,.current a span{border-top-color:blue}
a:hover b,.current a b{border-left-color:blue}

</style>
</head>
<body>
<ul id="main-nav">
    <li class="current"><a href="#"><span></span>Home<b></b></a></li>
    <li><a href="#"><span></span>News<b></b></a></li>
    <li><a href="#"><span></span>About<b></b></a></li>
    <li><a href="#"><span></span>Work<b></b></a></li>
    <li><a href="#"><span></span>A longer item<b></b></a></li>
    <li><a href="#"><span></span>Contact<b></b></a></li>
</ul>
</body>
</html>
4

Paul’s technique is probably the best, though I’d suggest tweaking the height to width ratio of top and bottom borders to exactly 1:1, 2:1 or 3:1 – makes the jaggies less annoying.

Going to play with this though… there’s got to be a way to make it work without targeting IE for different margins and line-heights.

5

Hey, I got it working all the way back to IE 5.5 without IE specific hacks.

Basically same markup as Paul’s, but with this CSS:


html,body,ul,li {
	margin:0;
	padding:0;
}

ul  {
	list-style:none;
	overflow:hidden;
	height:32px;
}

ul li {
	display:inline;
}

ul a {
	position:relative;
	float:left;
	padding:8px 0 8px 16px;
	margin:0 -13px 0 16px;
	text-decoration:none;
	color:#444;
	background:#FAA;
	font:bold 14px/16px arial,helvetica,sans-serif;
}

ul a span {
	position:absolute;
	top:0;
	left:-16px;
	border-top:32px solid #FAA;
	border-left:16px dashed transparent;
}

ul a b {
	display:inline-block;
	vertical-align:bottom;
	height:16px;
	margin:-24px 0 -8px 16px;
	border-bottom:32px solid #FAA;
	border-right:16px solid #FFF;
}

ul .current a {
	background:#8F8;
}

ul .current span {
	border-top-color:#8F8;
}

ul .current b {
	border-bottom-color:#8F8;
}

ul a:active,
ul a:focus,
ul a:hover {
	background:#CCF;
}

ul a:active span,
ul a:focus span,
ul a:hover span {
	border-top-color:#CCF;
}

ul a:active b,
ul a:focus b,
ul a:hover b {
	border-bottom-color:#CCF;
}

I tossed a copy up live here:
CSS 2.1 Slanted Menu

Reminds me a lot of my old cut-corners technique from three or four years ago:
http://battletech.hopto.org/html_tutorials/cutcorners/template.html

Which I had to do a “colorize the normally invisible” version to explain it…
http://battletech.hopto.org/html_tutorials/cutcorners/expanded.html

6

That’s a great improvement on mine :slight_smile: …and so much neater than all those transformations.

7

… and all those pointless child selectors… those alone rub me the wrong way.

It’s like something I read a while ago about programming in C

The difference between a descendant selector and a child selector feels much the same to me… especially when I see things like:

#main-nav > ul > li:first-child > a

… on something as simple as a menu - Building the ENTIRE thing on child selectors, and then still hacking it to work in IE using filters?!? Waste of time. Much less building the ENTIRE CSS on nothing BUT child selectors – serious whiskey tango foxtrot territory. Only good thing I can say about the transform method is it doesn’t need two sandbags, and instead uses a nest… Oh noes, 7 characters extra for each one :smiley:

8

I rarely use the child selector but that may be because we were brought up in the days of ie5 and 6 and found that it wasn’t really necessary.

It’s one of those rules that don’t fail silently so as long as IE6 is still around then it doesn’t have much use.