Currently facing two issues in Internet Explorer. The first involves my navigation menu where the links are stacking vertically instead of horizontally on the bar. Below is the code for the nav menu.
HTML
<div class="main-navigation" role="navigation" style="margin-top: 5px;">
<div class="nav-menu"><ul><li class="page_item page-item-8"><a href="http://tshirthideout.com/design-your-own/">design your own</a></li><li class="page_item page-item-10"><a href="http://tshirthideout.com/fan-photos/">fan photos</a></li><li class="page_item page-item-12"><a href="https://tshirthideout.com/win-a-free-t-shirt/">Win a free T-shirt</a></li></ul></div>
</div><!-- #site-navigation -->
CSS
.main-navigation li {
margin: 0px 20px 0px 0px;
position: relative;
text-align: center;
padding: 7px 0px;
}
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul {
border-left: 0;
display: block;
}
.main-navigation li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #cb0000;
font-weight: bold;
}
The second issue pertains to the ribbons I have for titles in the sidebar. The right bottom flap that gives it the wrap-around look is not displaying properly.
HTML
<div class="ribbon"><strong>SPECIAL OFFERS</strong></div>
CSS
.ribbon {
padding-bottom: 7px;
padding-top: 8px;
padding-left: 3px;
color: #fff;
text-shadow: 1px 1px 0px #c1c1c1;
font-size: 15px;font-family:'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif;
letter-spacing: 5px;
position:relative;
width:267px;
right:0px;
top:19px;
background-color:#212121;
-moz-border-radius:2px 0px 0px 2px; /*radius of 2px*/
-khtml-border-radius:2px 0px 0px 2px;
-webkit-border-radius:2px 0px 0px 2px;
-webkit-box-shadow: -2px 2px 4px rgba(50, 50, 50, 0.35);
-moz-box-shadow: -2px 2px 4px rgba(50, 50, 50, 0.35);
box-shadow: -2px 2px 4px rgba(50, 50, 50, 0.35);
}
.ribbon:after {
content:'';
width:0;
height:0;
border-color: #000 transparent transparent #000;
border-style:solid;
border-width:5px 5px;
position:absolute;
right:0;
bottom:-10px;
}
This code functions correctly in other major browsers but encounters issues in IE.