Forums
View unanswered posts | View active topics It is currently Fri Oct 24, 2014 1:48 am



Reply to topic  [ 6 posts ] 
 HOVER Styles 
Author Message

Joined: Thu Jul 15, 2010 11:09 am
Posts: 5
Post HOVER Styles
Hi,

I am not able to apply the CSS3 styles, only on hover event, is there any way to do that?


Thu Jul 15, 2010 11:12 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: HOVER Styles
There is a bug report about this: http://github.com/lojjic/PIE/issues#issue/26

I haven't had time to dig into it yet. But my hunch is that IE doesn't apply behaviors if they are only specified in a :hover style. If you apply the behavior in a non-:hover rule, I'm guessing you'll have better luck:

Code:
a {
   behavior: url(PIE.htc);
}
a:hover {
   border-radius: 5px;
   etc...
}


Thu Jul 15, 2010 11:46 am
Profile

Joined: Thu Jul 15, 2010 11:09 am
Posts: 5
Post Re: HOVER Styles
Thank you very much for your quick response.

Please find below what I tried.
Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test CSS3 Properties in IE</title>

<style>

body{
   margin-top:100px;
}
a.test{
   padding: 20px;
   text-align: center;
   width: 200px;
}
a:hover.test{
   border: 1px solid #696;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: #666 0px 2px 3px;
   -moz-box-shadow: #666 0px 2px 3px;
   box-shadow: #666 0px 2px 3px;
   background: #EEFF99;
   background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
   background: -moz-linear-gradient(#EEFF99, #66EE33);
   -pie-background: linear-gradient(#EEFF99, #66EE33);
   behavior: url(PIE.htc);
}
</style>

</head>

<body>

This is a <a href="#" class="test">Test Link</a> with CSS3 Properties

</body>


FF Output on hover:
Image

IE Output on hover:
Image

But the htc works fine for none hover items. :)
Thanks!..


Thu Jul 15, 2010 3:31 pm
Profile

Joined: Thu Jul 15, 2010 3:31 pm
Posts: 2
Post Re: HOVER Styles
Try:

Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test CSS3 Properties in IE</title>

<style>

body{
   margin-top:100px;
}
a.test{
   padding: 20px;
   text-align: center;
   width: 200px;
   behavior: url(PIE.htc);
}
a:hover.test{
   border: 1px solid #696;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: #666 0px 2px 3px;
   -moz-box-shadow: #666 0px 2px 3px;
   box-shadow: #666 0px 2px 3px;
   background: #EEFF99;
   background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
   background: -moz-linear-gradient(#EEFF99, #66EE33);
   -pie-background: linear-gradient(#EEFF99, #66EE33);
}
</style>

</head>

<body>

This is a <a href="#" class="test">Test Link</a> with CSS3 Properties

</body>


Notice the behavior moved to a.test instead of a.test:hover

That worked for me in my testing


Thu Jul 15, 2010 3:38 pm
Profile

Joined: Thu Jul 15, 2010 11:09 am
Posts: 5
Post Re: HOVER Styles
CSS3 Properties work, but sometimes it acts wiered.. And renders in IE7 differently.

THANKS A LOT for your response and advices!...


Fri Jul 16, 2010 8:30 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: HOVER Styles
Please file bug reports for any differences in rendering and other strange behavior. Having these things reported is the only way I'll be able to make it better. Thanks!


Sat Jul 17, 2010 7:40 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 6 posts ] 

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.