It's a strange problem, and it must be an IE bug IMO.
I found one solution, but it is not very logical (but it does work)
If you set
.MenuSeparator img{
margin-top:1px;
}
The images are ok in IE6 (I didn't test in IE7, mostly IE6 is worse), but there is a border on top now, which you have to remove.
.MainMenu_MenuBreak has a border top and bottom, remove them and add
border-width:0;
(to overwrite a value inherited from default.css)
But these changes will also push the image down one pixel in FF (which is correct) so you will have to use a hack (* html, or another one) to apply this only to IE
(and check if it's still a problem in IE 8 and up)
Resulting CSS:
.MainMenu_MenuBreak {
background-color: #CCCCCC;
background-image: url(btnbg2.gif);
background-position: center center;
border-width:0;
height: 32px;
}
* html .MenuSeparator img{
margin-top:1px;
}
So, why does it work? No idea... You need some strange hacks for IE sometimes... (I'm not a fan;-)