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 :
can anyone tell me the solution?
