Ribbon Banner Major issues with IE

I have got the ribbon banner working fine on all browsers but IE. Any advice here could help.

http://www.sdindependentplumbing.com/

Thanks in advance

Here is the CSS

#navigation_container {
margin: 0 auto;
width: 855px;
margin-top:-20px;


}

#navigation li {
list-style: none;
display: block;
float: left;
margin: 1em 7.5em;
margin-left:-99px;


}

#navigation li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: block;
text-decoration: none;
color: #f0f0f0;
font-size: 1em;
margin: 0 auto;
line-height: 28px;

}

#navigation li.active a:hover,
#navigation li a:hover {
margin-top: 2px;
}

#navigation li.active {
font-style: italic;
}

#navigation li.active a {
}


.rectangle {

background: #0081ff;
height: 62px;
position: relative;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);

-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;

z-index: 500; /* the stack order: foreground */
margin: 3em 0;

}

.l-triangle-top {
border-color: #0052b8 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: 1px;
left: -50px;
}

.l-triangle-bottom {
border-color: transparent transparent #0052b8;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: -40px;
left: -150px;
}


.r-triangle-top {
border-color: #0052b8 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
right: -50px;
top: -109px;
}

.r-triangle-bottom {
border-color: transparent transparent #0052b8;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
top: -150px;
right: -150px;
}

Nows its working in IE8 but not IE7 or 9