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

HOVER Styles
http://css3pie.com/forum/viewtopic.php?f=3&t=9
Page 1 of 1

Author:  aftrix [ Thu Jul 15, 2010 11:12 am ]
Post subject:  HOVER Styles

Hi,

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

Author:  jason [ Thu Jul 15, 2010 11:46 am ]
Post subject:  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...
}

Author:  aftrix [ Thu Jul 15, 2010 3:31 pm ]
Post subject:  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!..

Author:  Arquero [ Thu Jul 15, 2010 3:38 pm ]
Post subject:  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

Author:  aftrix [ Fri Jul 16, 2010 8:30 am ]
Post subject:  Re: HOVER Styles

CSS3 Properties work, but sometimes it acts wiered.. And renders in IE7 differently.

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

Author:  jason [ Sat Jul 17, 2010 7:40 am ]
Post subject:  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!

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