CSS menu positioning IE/Firefox problem

[sonny850]

Hi

I am using

.menu3{margin:0 auto; padding:0; height:25px; width:1024px; display:block; background:url('/images/topMenuImages3.png') repeat-x;}
.menu3 li{padding:0; margin:0; list-style:none; display:inline;}
.menu3 li a{float:left; padding-left:15px; display:block; color:rgb(50,110,161); text-decoration:none; font:11px verdana, geneva, sans-serif; cursor:pointer; background:url('/images/topMenuImages3.png') 0px -30px no-repeat;}
.menu3 li a span{line-height:25px; float:left; display:block; padding-right:15px; background:url('/images/topMenuImages3.png') 100% -30px no-repeat;}
.menu3 li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu3 li a:hover span{background-position:100% -60px;}
.menu3 li a.active, .menu li a.active:hover{line-height:25px; font:11px verdana, geneva, sans-serif; background:url('/images/topMenuImages3.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu3 li a.active span, .menu li a.active:hover span{background:url('/images/topMenuImages3.png') 100% -90px no-repeat;}

the CSS menu looks fine in FF, but in IE is shifts 10-20px to the right...very annoying indeed

Anyone any idea how to solve this?

Thanks

[nishu]

Hi

For your problem just add display:inline where ever you used float:left and padding-left:..px; together.

Hope your problem will resolve

Thanks