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

i've tried all solutions, but still have problem with :HOVER
http://css3pie.com/forum/viewtopic.php?f=3&t=153
Page 1 of 1

Author:  Pierrot [ Tue Aug 31, 2010 3:34 pm ]
Post subject:  i've tried all solutions, but still have problem with :HOVER

Hi everybody,

i'm starting a website in HTML5 and CSS3, and i use CSS3PIE to get it.
I'm working on the menu (navigation of the website) and have some problem with :HOVER behavior. My code works well in Chrome, Safari and FireFox. But in IE the :HOVER don't work correctly.
I've tried to play with position:relative, z-index, i know that IE won't apply behaviors if they're specified in a :hover selector, so i've tried to apply the behavior using the main selector, but no effect....
Maybe i'm doing something wrong or missing something...
Here is my html5 code:
[code
<body>
<div id="container">
<header id="entete" role="banner">
<h1>
<a title="Accueil"
href="index2.php">LOGO A VENIR</a>
</h1>
</header>
<nav id="navigation" role="navigation">
<a title="Accueil" href="index2.php">HOME</a>
<a title="Ce que nous faisons" href="index2.php">NOS PRESTATIONS</a>
<a title="Ils nous ont fait confiance" href="index2.php">NOS REFERENCES</a>
<a title="Besoin d'aide ?" href="index2.php">FORUM</a>
<a title="Nous contacter ?" href="index2.php">CONTACTEZ NOUS</a>
<a title="Nous contacter ?" href="index2.php">CONTACTEZ NOUS</a>
</nav>
</div>
</body>
[/code]

And here's my css(3) code (i'm using first a reset css):
Code:
BODY{
   background:#FFF no-repeat fixed center top;
   position: relative;
   font-family:Arial,Helvetica,sans-serif;
   font-size:11px;
   color:#000;
   outline: none;
}
#container{
   display:block;
   margin: 0 auto;
   width: 1000px;
   background: #FFF;
}
header{
   height: 55px;
}
#navigation{
   height: 36px;
   line-height: 36px;
   position: relative;
   background: #FFF;
   background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFF), to(#c3c3c3));
   background: -moz-linear-gradient(#FFF, #c3c3c3);
   background: linear-gradient(#FFF, #c3c3c3);
   -pie-background: linear-gradient(#FFF, #c3c3c3);
   -webkit-border-radius: 8px 8px 0 0;
   -moz-border-radius: 8px 8px 0 0;
   border-radius: 8px 8px 0 0;
   behavior: url(CSS/PIE.htc);
   border-top: 1px solid #ececec;
   border-right: 1px solid #ececec;
   border-left: 1px solid #ececec;
   border-bottom: 1px solid #999999;
}
#navigation a{
   color: #808080;
   font-weight: bold;
   font-size: 14px;
   display: inline-block;
   padding: 0 15px;
   behavior: url(CSS/PIE.htc);
}
#navigation a:HOVER {
   color: #FFF;
   background: #1a1a1a;
   background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ececec), to(#1a1a1a));
   background: -moz-linear-gradient(#ececec, #1a1a1a);
   background: linear-gradient(#ececec, #1a1a1a);
   -pie-background: linear-gradient(#ececec, #1a1a1a);
   behavior: url(CSS/PIE.htc);
}


I wonder if the problem is not caused because I already use a gradient background on the element "navigation" (nav element in html5).

if someone would give me a solution for this problem, I'd be very grateful because I'm going crazy...

thank you

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