ie9/CSS: Flyout menu not working in ie9, but looks great in Firefox/Chrome

Posted by Brandon on Stack Overflow See other posts from Stack Overflow or by Brandon
Published on 2012-03-28T17:18:19Z Indexed on 2012/03/28 17:29 UTC
Read the original article Hit count: 331

Filed under:
|
|

Please see this flyout menu: http://www.caseen.com/store.html. It looks amazing in both Firefox and Chrome, but not in IE9! Trying to see what is going on =(.

It looks like ie9 is completing ignoring the stylesheet, but in error checking and clicking ie9 direct mode, it shows up however VERY ugly with huge nasty white borders around the links!

Please see my code:

<div class="flyout">
                          <ul>
                            <!--START: CATEGORIES-->
                            <!--START: CATEGORY_FORMAT-->
                            <li><a href="view_category.asp?cat=CATID">&nbsp;CATEGORY</a>
                            <!--END: CATEGORY_FORMAT-->
                                <ul><!--START: SUB_CATEGORY_FORMAT-->
                                    <li><a href="view_category.asp?cat=CATID">&nbsp;CATEGORY</a></li>
                          <!--END: SUB_CATEGORY_FORMAT--></ul>
                          <!--END: CATEGORIES-->
                            </li>
                          </ul>
                          </div>

AND CSS

.flyout {
width: 130px;
height: auto;
position:relative;
margin: -10 0;
padding: 0;
z-index:10000;
}

.flyout ul li a {
display:block; 
text-decoration:none;
color: #fff;
width: 130px;
border: solid;
border-color: #000;
border-width: 0 0 0 5px;
text-align:left;  
font-size:12px;
line-height: 25px;
}

.flyout ul { 
padding:0px;
list-style-type: none;
}
.flyout ul li {
float:left; 
margin-right:1px; 
position:relative;
}
.flyout ul li ul {
display: none;
}

.flyout ul li:hover a {
border: solid;
border-color: #fff;
border-width: 0 2 0 5px;
color: #60dfe5;
}

.flyout ul li:hover ul {
display:block; position:absolute; top:0;
left:130px; 
width:10px;
}
.flyout ul li:hover ul li a.hide {
background:#000; 
color:#fff;
}

.flyout ul li:hover ul li:hover a.hide {width:180px;}
.flyout ul li:hover ul li ul {display: none;}
.flyout ul li:hover ul li a {
display:block;
background:#000; 
color:#60dfe5;
width:200px;
}
.flyout ul li:hover ul li a:hover {
background:#000;
color:#fff;
}

Thanks,

Brandon

© Stack Overflow or respective owner

Related posts about html

Related posts about css