Hi everyone,
I have setup a menu with colored borders. Everything works fine in Chrome, FF & Safari, but in IE8 the bottom-top is displaying #FFF instead of the .current_page_item css .. and I'm stumped.
This is what the css looks like:
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background:none repeat scroll 0 0 #FFF;
border-bottom-color:#F39800;
outline:0 none;
}
.sf-menu .current_page_item a, .sf-menu a .current_page_item a, .sf-menu .current_page_ancestor a{
border-left: 1px solid #F39800;
border-top: 1px solid#F39800 !important;
border-right: 1px solid #F39800;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.sf-menu a {
border-bottom:1px solid #F39800;
border-left:none;
border-top:1px solid #FFF;
padding:9px 13px;
text-decoration:none;
}You can see it live on www.annejil.nl. Anybody have clue?
