Forums
FAQ • Search • Login
Register
View unanswered posts | View active topics It is currently Wed May 22, 2013 3:16 pm

Board index » Troubleshooting Help: 1.0.x

All times are UTC - 7 hours [ DST ]



Reply to topic  Page 1 of 1
  [ 9 posts ] 
Print view Previous topic | Next topic 
 IE8: li:hover background don't render radius 
Author Message
rhazor

Joined: Mon Oct 01, 2012 3:46 am
Posts: 1
Post 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.
Mon Oct 01, 2012 3:54 am
Profile
lakida

Joined: Fri Nov 16, 2012 4:11 am
Posts: 1
Post Re: IE8: li:hover background don't render radius
I've this problem too! :/ any solutions???
Fri Nov 16, 2012 4:14 am
Profile
kenkin

Joined: Thu Nov 22, 2012 4:12 am
Posts: 1
Post 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?
Thu Nov 22, 2012 4:42 am
Profile
XmlmXmlmX

Joined: Wed Dec 05, 2012 8:29 am
Posts: 1
Post Re: IE8: li:hover background don't render radius
Hi, same problem for me. Is there already has a solution to this?
Wed Dec 05, 2012 8:31 am
Profile
tarunsyntel

Joined: Thu Dec 13, 2012 5:19 am
Posts: 7
Post 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 ?
Thu Dec 13, 2012 5:51 am
Profile
jason

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1396
Post 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;
}
Thu Dec 13, 2012 10:28 am
Profile
tarunsyntel

Joined: Thu Dec 13, 2012 5:19 am
Posts: 7
Post 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.
Fri Dec 14, 2012 4:42 am
Profile
jason

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1396
Post 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.
Fri Dec 14, 2012 10:59 am
Profile
AJsWebCreations

Joined: Fri Mar 01, 2013 3:24 pm
Posts: 5
Location: Florida
Post 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?
Sat Mar 02, 2013 5:11 pm
Profile WWW
Display posts from previous:  Sort by  
Reply to topic   Page 1 of 1
  [ 9 posts ] 

Board index » Troubleshooting Help: 1.0.x

All times are UTC - 7 hours [ DST ]

Who is online

Users browsing this forum: Bing [Bot], Google [Bot] and 3 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.