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
Forums
