Forums
View unanswered posts | View active topics It is currently Mon Sep 22, 2014 10:14 am



Reply to topic  [ 4 posts ] 
 Hover image remains when mouse leaves via rounded corner 
Author Message

Joined: Sun Jan 08, 2012 12:53 pm
Posts: 1
Post Hover image remains when mouse leaves via rounded corner
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>


Mon Jan 23, 2012 7:22 am
Profile

Joined: Tue Oct 11, 2011 10:44 am
Posts: 5
Post Re: Hover image remains when mouse leaves via rounded corner
i'm running into a similar issue


Tue Apr 24, 2012 8:38 am
Profile

Joined: Wed Apr 11, 2012 9:44 am
Posts: 1
Post Re: Hover image remains when mouse leaves via rounded corner
I've encountered the same problem trying to show tooltips with rounded corners, doesn't work as expected.
I realized that PIE only works with static content and as a workaround rendered my tooltips with javascript.
Have a look at: http://www.biblegenealogy.info


Tue Apr 24, 2012 7:30 pm
Profile

Joined: Mon Apr 11, 2011 4:54 pm
Posts: 53
Post Re: Hover image remains when mouse leaves via rounded corner
PIE will work with dynamic elements, but you might need to tell it when the elements move.


Tue May 15, 2012 9:49 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 4 posts ] 

Who is online

Users browsing this forum: Yahoo [Bot] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.