CSS3 PIE Forums
http://css3pie.com/forum/

IE8: li:hover background don't render radius
http://css3pie.com/forum/viewtopic.php?f=3&t=1811
Page 1 of 1

Author:  rhazor [ Mon Oct 01, 2012 3:54 am ]
Post subject:  IE8: li:hover background don't render radius

Code:
nav {
   background: url('../images/nav-bg.png') repeat-x;
   border: 1px solid #336c2b;
   clear: both;
   width: 960px;
   height: 48px;
   position: relative;
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
   border-radius: 30px;
   behavior: url('js/PIE/PIE.htc');
}
nav ul li {
   float: left;
   border-right: 1px solid #336c2b;
   border-left: 1px solid #78c368;
}
nav ul li.home {
   border-left: none;
   text-indent: -9999px;
   background: url('../images/home.png') no-repeat 50% 50%;
}
nav ul li.last {
   border-left: none;
   border-right: none;
   float: right;
   margin-right: 20px;
}
nav ul li a {
   display: block;
   padding: 0 30px;
   height: 48px;
   line-height: 48px;
   font-size: 15px;
   color: #FFF;
   text-shadow: 0 1px 0 #387031;
}
nav ul li a:hover {
   background: #5fae53;
}
nav ul li.home a:hover {
   background: #5fae53 url('../images/home.png') no-repeat 50% 50%;
   position: relative;
   border-radius: 30px 0 0 30px;
   behavior: url('js/PIE/PIE.htc');
}


nav ul li.home a:hover is the one that is not working.

Latest Firefox and Chrome hovered: http://i48.tinypic.com/6zn5w0.jpg
IE8 hovered: http://i49.tinypic.com/2rhp8g6.jpg

It renders background radius fine for nav in IE8, and using same settings for hovered li it doesn't work. I tried not just border-radius, but border-top-left-radius and etc too.

Author:  lakida [ Fri Nov 16, 2012 4:14 am ]
Post subject:  Re: IE8: li:hover background don't render radius

I've this problem too! :/ any solutions???

Author:  kenkin [ Thu Nov 22, 2012 4:42 am ]
Post subject:  Re: IE8: li:hover background don't render radius

I've this problem too...

FYI, I use IE-9 & Windows 7...

From other questions, i find the more prediction of the causes (but didn't solved my problem)...

1. PIE can't work well in Windows 7 (http://css3pie.com/forum/viewtopic.php?f=3&t=1791)
2. IE9 doesn't apply border-radius and box-shadow in case doctype is "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">".(http://css3pie.com/forum/viewtopic.php?f=3&t=1829)

For the first prediction, i've find it true. The file with PIE worked well in the Windows XP, but not in Windows 7.
But for the second prediction, i've find the same result for other source with no <!doctype ...>.

Are there any solution to make PIE works?

Author:  XmlmXmlmX [ Wed Dec 05, 2012 8:31 am ]
Post subject:  Re: IE8: li:hover background don't render radius

Hi, same problem for me. Is there already has a solution to this?

Author:  tarunsyntel [ Thu Dec 13, 2012 5:51 am ]
Post subject:  Re: IE8: li:hover background don't render radius

I've this problem too! :/ any solutions???

Details : viewtopic.php?f=3&t=1927
Topic : PIE features not working in IE on Hover Effect

Even i tried border-image and all everthing works fine untill and unless you are not using it on hover effect.

Any solutions ?

Author:  jason [ Thu Dec 13, 2012 10:28 am ]
Post subject:  Re: IE8: li:hover background don't render radius

The 'behavior' property does not work when it is within a :hover rule. Simply move it to another rule that matches the same elements without the :hover pseudo.

Code:
nav ul li.home a {
   behavior: url('js/PIE/PIE.htc');
}
nav ul li.home a:hover {
   background: #5fae53 url('../images/home.png') no-repeat 50% 50%;
   position: relative;
   border-radius: 30px 0 0 30px;
}

Author:  tarunsyntel [ Fri Dec 14, 2012 4:42 am ]
Post subject:  Re: IE8: li:hover background don't render radius

Jason but in my case if you see i am not using it in within a hover rule.
my component is getting populated on hover efect on some other other link or component.

Author:  jason [ Fri Dec 14, 2012 10:59 am ]
Post subject:  Re: IE8: li:hover background don't render radius

@ tarunsyntel I was trying to answer the question from this topic's original poster. Yours sounds like a different issue, and you've got another thread devoted to it, so let's not take this one off topic.

Author:  AJsWebCreations [ Sat Mar 02, 2013 5:11 pm ]
Post subject:  Re: IE8: li:hover background don't render radius

If it does not work with the hover rule then is there a work around that will enable us to have a border radius on hover in IE?

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/