sIFR 3 r436 ul li width problem in IE7

Question

I use sIFR 3 r436 in a horizontal menu using the following css:

#block-menu-primary-links ul.menu 
 {
margin:0;
padding:0;
display:block;
}
#block-menu-primary-links ul.menu li.leaf {
list-style-type: none;
list-style-image:none;
padding: 0; /* LTR */
margin: 0;
float:left;
}



.sIFR-active #block-menu-primary-links ul li {
  visibility: hidden;
  font-size: 13px;
  padding:0;
  margin:0;
  }

And the following js

sIFR.replace(thesansb9black, {
  selector: '#block-menu-primary-links ul li ',
  wmode: 'transparent',
  forceSingleLine: true,
  fitExactly: true,
  css: 
 [ 
 '.sIFR-root { color: #FFFFFF; margin-right:0; }'
      ,'a { text-decoration: none; color: #FFFFFF; }'
      ,'a:link { color: #FFFFFF; }'
      ,'a:hover { color: #666666; }'
   ]

});

The problem is that in IE7(in FF3.5.5, IE8 and Chrome it looks good) the items get extra padding at the right side. When the site loads it looks good, then the extra padding is added in IE7.

Answer 1

This is most often caused by the CSS style of the HTML element you are replacing taking up more space than the sIFR'ed replacement. Maybe you have a letter-spacing setting somewhere globally? Does letter-spacing:0 change anything?

Answer 2

Yes, it sounds like that's the problem. I tried to add the letter-spacing inside the .sIFR-root, .sIFR-active and the usual css without any success. It's weird that the (rendered)text is placed correctly when the page is loading, then after a second it gets the padding.

Answer 3

letter-spacing: -0.1em did the trick!