I had modified an out-of-box skin of Subtext when creating this blog. I modified the hell out of it but I also introduced a very nast result from copying over a couple styles from another style sheet that produced wicked results in IE in terms of font issue when comparing it to how it was being rendered in Firefox. In Firefox everything looked perfect. But the same font and same style sheet was rending so much narrow and unreadable text. I couldn’t figure out why until I came across the following line in my style sheet:
letter-spacing : -1px;
And here were those two styles defined in that style sheet:
h1 {
font-size : bold 16px;
font-family: Arial, Sans-Serif;
padding : 8px 0 4px 0;
margin : 0;
letter-spacing : -1px;
}
h2
{
font : bold 20px Arial, Sans-Serif;
letter-spacing : -1px;
}
For anyone having weird readability with Subtext and IE, delete lines like this dealing with negative letter spacing, or any other negative pixel statements in your CSS which may be causing that issue.
Also, be aware and very careful with the line-height property in any code, not just Subtext. You typically do not want to really use this (in my opinion) as it can really mess up text as well and sometimes it’s easy to overlook if you explicitly set a line height in a style.
Print | posted on Monday, February 23, 2009 10:53 PM
