0

i worked a horizontal menu in my project. when hovering the ling\k the background image will change.the output looks perfect in all browsers even in IE6 except firefox.when hovering the last link a small gap appears.here my code.

CSS :

<.menu_holder {
    width:1000px;
    height:40px;
    background-image:url(../images/menu_normal_govind.jpg);
    background-repeat:repeat-x;

}
.menu {
    margin:0px;
    padding:0px;
}

.menu li {
    list-style-type:none;
    float:left;
    display:block;
    background-image:url(../images/menu_divi_govind.jpg);
    background-repeat:no-repeat;
    background-position:right;
    padding-right:2px;
}
.menu li a {
    padding-left:35px;
    padding-right:35px;
    display:block;
    color:#FFF;
    line-height:39px;
    background-image:url(../images/menu_normal_govind.jpg);
    background-repeat:repeat-x;


}
.menu li a:hover {
    background-image:url(../images/menu_hover_govind.jpg);
    background-repeat:repeat-x;
    padding-left:35px;
    padding-right:35px;
    display:block;
    color:#FFF;
    line-height:39px;
}

HTML :

  <div class="menu_holder">

        <ul class="menu">

            <li> <a href="#">Home</a></li>
            <li> <a href="#">Our Services</a></li>
            <li> <a href="#">Training</a></li>
            <li> <a href="#">HR Interventions</a></li>
            <li> <a href="#">Biodata</a></li>
            <li> <a href="#">Career Development</a></li>
            <li style="background-image:none; padding-right:0px;"> <a href="#" style="padding-left:38px; padding-right:38px; ">Clients</a></li>


         </ul>

  </div>

can anyone tell me the solution?

Edited by pyTony: fixed formatting

2
Contributors
1
Reply
2
Views
5 Years
Discussion Span
Last Post by karthik_ppts
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.