How can I make my rhombus styled menu work in IE 7 & 8? It's currently functioning fine in Chrome, Firefox, and IE9. Any suggestions or solutions would be greatly appreciated!
Thank you in advance.
Here is the HTML code:
<div id = "menu">
<ul id="nav">
<li class="rhombusStart"> </li>
<li class="rhombus"><a class="rhlink" href="#"><span>Home</span></a></li>
<li class="rhombus"><a class="rhlink" href="#"><span>Market <br> Update</span></a></li>
<li class="rhombus"><a class="rhlink" href="#"><span>Membership</span></a></li>
<li class="rhombus"><a class="rhlink" href="#"><span>FISC Info</span></a>
</li>
<li class="rhombusEnd"> </li>
</ul>
</div>
And here is the CSS code:
/*******************************************
Menu Styling
*******************************************/
#menu {
margin: 0 auto;
padding-left: 2%;
width: 1024px;
height: 2.9em;
position: relative;
top: 0;
background-color: rgb(255,194,14);
border: 1px solid rgb(140,51,61);
}
#nav {
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
height:2.9em;
background-color: rgb(255,194,14);
}
#nav > li {
float:left;
position:relative;
}
#nav > li.rhombus {
float:left;
position: relative;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-o-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:skew(35deg);
-moz-transform:skew(35deg);
-ms-transform:skew(35deg);
-o-transform:skew(35deg);
transform:skew(35deg);
border-right: 1px solid rgb(239,89,24);
border-left: 1px solid rgb(255,244,80);
background-color: rgb(255,194,14);
font-family: Georgia;
color: rgb(131,0,26);
width: 8em;
text-align: center;
height: 2.9em;
}
li.rhombus > a span {
-webkit-transform:skew(-35deg);
-moz-transform:skew(-35deg);
-ms-transform:skew(-35deg);
-o-transform:skew(-35deg);
transform:skew(-35deg);
text-decoration: none;
vertical-align: middle;
display: table-cell;
}