I don't know if this is the right place to ask this but i'm trying to figure out what is happening and knocking my head on the wall for it.

I'm using jquery to add the "hover" effect in IE6. so this is my html

2. <div id="header_glbl" >
3. <ul>
4. <li class="top_btn_left"><a href="index.php">Κεντρική</a></li>
5. <li class="top_btn"><a></a></li>
6. <li class="top_btn"><a></a></li>
7. <li class="top_btn"><a></a></li>
8. <li class="top_btn"><a></a></li>
9. <li class="top_btn"><a></a></li>
10. <li class="top_btn"><a></a></li>
11. <li class="search">
12. <form name="search_frm" id="search_frm" method="post" action="">
13. <input type="text" id="search_key" name="search_key"/>
14. <img src="images/buttons/magnifier.gif" alt="go" />
15. </form>
16. </li>
17. </ul>
18. </div>

A simple menu.

So i'm using this js code to add the effect for IE6

2. <script type="text/javascript">
3. $(function() {
4.         $('#header_glbl .top_btn_left').hover(function(){
5.                $(this).addClass('over_left');
6.         }, function() {
7.                $(this).removeClass('over_left');
8.         });
9. });
10. 
    
11. $(function() {
12.         $('#header_glbl .top_btn').hover(function(){
13.                $(this).addClass('over_middle');
14.         }, function() {
15.                $(this).removeClass('over_middle');
16.         });
17. });
18. </script>

And the css:

2. .over_left{
3. background: url("images/buttons/btn_left_on.gif") no-repeat 0 0;
4. width:120px;
5. height:35px;
6. cursor: pointer;
7. }
8. 
   
9. .over_middle{
10. background: url("images/buttons/top_middle_on.gif") no-repeat 0 0;
11. width:120px;
12. height:35px;
13. cursor: pointer;
14. }

My problem is that the "background: url("images/buttons/top_middle_on.gif") no-repeat 0 0;" property is not been added. The path is defenitely correct and the other properties is beeing added succesfully.

Please if u think this is something you can help me with I whould really appreciate it.

Thanks in advance...