First CSS3PIE is a wonderful solution when we have to deal with so many people using IE.
I'm using PIE in an attempt to make a rounded corner menu display properly in IE. It looks lovely but I am left with a problem. The hover image remains when the mouse leaves a li via the rounded corner. Attached is a sample file - piemenu.html. For ease of use, it is coded to access PIE.htc in the same folder as the file.
To reproduce the problem, create an html file with the code below in a folder with PIE.htc then run the file within IE. Use the mouse to scroll over the menu options but as the mouse exits, it should leave via a rounded corner (using a clock analogy, the mouse should exit the li at about 1:30, 4:30, 7:30 and 10:30). If though the mouse exits the li, the hover image will remain. If you don't succeed, make sure the mouse exits slowly from the rounded corner. It will happen.
Thanks very much for any help addressing this problem. Please let me know if there is anything I can do to help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#logobar {
text-align: left;
height:80px:
padding: 0px 0px 0px 0px;
margin-left: auto;
margin-right: auto;
background-color:#0E0A82;
width: expression((document.body.clientWidth < 704)? "705px" : "auto"); /* IE min-width workaround (values must be different to prevent lockup in IE 6) */
min-width:705px /* all other browsers */
}
#logo {
float:right;
padding-top:10px;
padding-right:10px;
text-align:right;
color:#0E0A82;
background-color:transparent;
font-size:45px;
padding-right:10px;
text-shadow:-5px 1px 15px #0E0A82;
filter:Shadow(Color#0E0A82, Direction=270, Strength=4);
}
#menuHolder {
text-align: center; /* be nice to IE5 */
position: absolute;
top: 75px;
left: 0px;
width: 100%;
width: expression((document.body.clientWidth < 694)? "695px" : "auto"); /* IE min-width workaround (values must be different to prevent lockup in IE 6) */
min-width:695px /* all other browsers */
}
ul#piemenu,ul#piemenu ul{
margin:0;list-style:none;padding:0;background-color:#202020;
background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
background-image:-o-linear-gradient(-90deg,rgba(150,150,150,0.35),rgba(255,255,255,0)); /* Opera */
background-image:-moz-linear-gradient(-90deg,rgba(150,150,150,0.35),rgba(0,0,0,0.35)); /* Firefox 3.6+ */
background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(150,150,150,0.35)),to(rgba(255,255,255,0))); /* for webkit browsers */
background-image:-webkit-linear-gradient(-90deg,rgba(150,150,150,0.35),rgba(255,255,255,0)); /* Webkit (Chrome 11+) */
background-image: -ms-linear-gradient(-90deg,rgba(150,150,150,0.35),rgba(255,255,255,0)); /* IE10 */
background-image:linear-gradient(-90deg,rgba(150,150,150,0.35),rgba(255,255,255,0));
/* filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#28FFFFFF', endColorstr='#00FFFFFF'); /* IE rule - no rounded corners */
/* -pie-background:linear-gradient(-90deg,rgba(255,255,255,0.35),rgba(255,255,255,0)); /* PIE gradients using opaque colors become 100% opaque */
-pie-background:linear-gradient(-90deg,#28FFFFFF,#00FFFFFF); /* PIE gradients using opaque colors become 100% opaque */
behavior: url(PIE.htc);
opacity:0.80; /* makes for an opaque background in IE */ }
ul#piemenu ul{
display:none;position:absolute;left:0;top:100%;border-color:#000000;
-moz-box-shadow:1.4px 1.4px 2px #B1B1B1;
-webkit-box-shadow:1.4px 1.4px 2px #B1B1B1;
box-shadow:1.4px 1.4px 2px #B1B1B1;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
opacity:1.00; /* If not included, the opamakes for an opaque background in IE */ }
ul#piemenu li > a {
behavior: url(PIE.htc); }
ul#piemenu li:hover>*{
display:block;}
ul#piemenu li{
position:relative;
zoom:1;
display:block;white-space:nowrap;font-size:0;float:left;}
ul#piemenu li:hover{
z-index:1;}
ul#piemenu ul ul{
position:absolute;left:100%;top:0;
behavior: url(PIE.htc);}
ul#piemenu{
padding:6px 6px 6px 0;font-size:0;z-index:999;position:relative;display:inline-block;
zoom:1;
*display:inline;}
ul#piemenu>li,ul#piemenu li{
margin:0 0 0 6px;}
* html ul#piemenu li a{
display:inline-block;}
ul#piemenu ul>li{
margin:6px 0 0;}
ul#piemenu a:active, ul#piemenu a:focus{
outline-style:none;}
ul#piemenu a,ul#piemenu a.pressed{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial;font-weight:bold;color:#E7E5E5;cursor:pointer; }
ul#piemenu ul li{
float:none;margin:0;}
ul#piemenu ul a{
text-align:left;}
ul#piemenu li:hover>a{
background-color:#e30003; border-color:#F8F8F8; border-style:solid;font:12px Arial; font-weight:bold; color:#C0C0C0;
text-decoration:none; background-color:#e30003;
background-image:-o-linear-gradient(-90deg,#e30003,#000));
background-image:-moz-linear-gradient(-90deg,#e30003,#000);
background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(#e30003),to(#000));
background-image:-webkit-linear-gradient(-90deg,#e30003,#000);
background-image:linear-gradient(-90deg,#e30003,#000);
-pie-background:linear-gradient(-90deg,#e30003,#000); }
ul#piemenu img{
border:none;vertical-align:middle;margin-right:8px;}
ul#piemenu img.over{
display:none;}
ul#piemenu li:hover > a img.def{
display:none;}
ul#piemenu li:hover > a img.over{
display:inline;}
ul#piemenu li a.pressed img.over{
display:inline;}
ul#piemenu li a.pressed img.def{
display:none;}
ul#piemenu a{
padding:8px 20px;
background-color:;
background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;color:#E7E5E5;text-decoration:none;}
ul#piemenu li:hover>a,ul#piemenu li>a.pressed{
border-style:solid;border-color:#F8F8F8; font-weight:bold; color:#C0C0C0; text-decoration:none; background-color:#e30003;
background-image:-o-linear-gradient(-90deg,#e30003,#000));
background-image:-moz-linear-gradient(-90deg,#e30003,#000);
background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(#e30003),to(#000));
background-image:-webkit-linear-gradient(-90deg,#e30003,#000);
background-image:linear-gradient(-90deg,#e30003,#000);
-pie-background:linear-gradient(-90deg,#e30003,#000); /* This puts gradient on pressed! */ }
ul#piemenu li.topmenu>a{
background-color:;
border-width:1px 0 0 0;border-style:solid;
border-color:;
border-radius:16px;
-moz-border-radius:16px;
-webkit-border-radius:16px;
font:bold 13px Arial;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#piemenu li.topmenu:hover>a,ul#piemenu li.topmenu>a.pressed{
border-style:solid; border-color:#F8F8F8; font:bold 13px Arial; color:#C0C0C0; text-decoration:none; text-shadow:0 1px 0 #e30003;
background-color:#e30003;
background-image:-o-linear-gradient(-90deg,#e30003,#000));
background-image:-moz-linear-gradient(-90deg,#e30003,#000);
background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(#e30003),to(#000));
background-image:-webkit-linear-gradient(-90deg,#e30003,#000);
background-image:linear-gradient(-90deg,#e30003,#000);
-pie-background:linear-gradient(-90deg,#e30003,#000); }
ul#piemenu li.subfirst>a{
border-radius:9px 9px 0 0;
-moz-border-radius:9px 9px 0 0;
-webkit-border-radius:9px;
-webkit-border-bottom-right-radius:0;
-webkit-border-bottom-left-radius:0; }
ul#piemenu li.sublast>a{
border-radius:0 0 9px 9px;
-moz-border-radius:0 0 9px 9px;
-webkit-border-radius:0;
-webkit-border-bottom-right-radius:9px;
-webkit-border-bottom-left-radius:9px; }
</style>
</head>
<body>
<div id="logobar" >
<div id="logo" >PIE Menu</div>
</div>
<div id="menuHolder">
<ul id="piemenu" class="topmenu">
<li class="topmenu"><a class="pressed" href="#url" title="Home" style="height:16px;line-height:16px;">Home</a></li>
<li class="topmenu"><a href="#url" title="Development philosophy" style="height:16px;line-height:16px;">Philosophy</a></li>
<li class="topmenu"><a href="#url" title="Services offered" style="height:16px;line-height:16px;"><span>Services</span></a>
<ul>
<li class="subfirst"><a href="#url" title="Consulting services">Consulting</a></li>
<li><a href="#url" title="Development services">Development</a></li>
<li><a href="#url" title="Support services">Support</a></li>
<li class="sublast"><a href="#url" title="Systems installation and maintenance">Systems</a></li>
</ul>
</li>
<li class="topmenu"><a href="#url" title="Download files" style="height:16px;line-height:16px;"><span>Downloads</span></a>
<ul>
<li class="subfirst"><a href="#url" title="Download1">Download1</a></li>
<li><a href="#url" title="Download2">Download2</a></li>
<li class="sublast"><a href="#url" title="Download3">Download3</a></li>
</ul>
</li>
<li class="topmenu"><a href="#url" title="Technical Resources" style="height:16px;line-height:16px;"><span>Technical Resources</span></a>
<ul>
<li class="subfirst"><a href="#url" title="Code Search Engines">Code Search Engines</a></li>
<li><a href="#url" title="C#/.NET">C#/.NET</a></li>
<li><a href="#url" title="CSS/HTML">CSS/HTML</a></li>
<li><a href="#url" title="JSP">JSP</a></li>
<li><a href="#url" title="Java">Java</a></li>
<li><a href="#url" title="OS X">OS X</a></li>
<li><a href="#url" title="Windows">Windows</a></li>
<li class="sublast"><a href="#url" title="Linux">Linux</a></li>
</ul>
</li>
<li class="topmenu"><a href="contact.jsp" title="Contact information" style="height:16px;line-height:16px;">Contact</a></li>
</ul>
</div>
</body>
</html>
Forums
