Forums
View unanswered posts | View active topics It is currently Thu Nov 27, 2014 5:49 am



Reply to topic  [ 1 post ] 
 i've tried all solutions, but still have problem with :HOVER 
Author Message

Joined: Tue Aug 31, 2010 3:02 pm
Posts: 5
Post 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


Tue Aug 31, 2010 3:34 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

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