What the heck is going on, you ask? Say hello to Tersus.

Bare bones? You got it. Tersus is an achingly simple WordPress theme without all the usual cruft. Please pardon the mess. This child theme is still under development.

CD

2005-12-07

CSS Letter-Spacing Glitch in IE

I’ve used the CSS attribute letter-spacing to control the amount of space in the titles on my site. They work fine in Firefox, utilizing the following CSS:

h1 { letter-spacing: -.08em }

IE6 doesn’t seem to like negative em values. IE6 actually adds spacing between the characters in this instance. To fix this, I used the * html hack filter to pass an alternate value over to IE6. Not a pretty way of doing it, but it works. Here’s the code I used:

h1 { letter-spacing: -.08em }

* html h1 { letter-spacing: -3px; }

By using a negative pixel value instead of a negative em value, IE6 displays the content properly.

Update … so why this approach? It’s scalable in modern browsers. By using em values, we can scale the letter-spacing based on the size of the fonts, as specified by the user’s settings. Pixel values don’t scale. That’s why we utilize the * html hack to pass the letter-spacing value we want it to have.

This item was posted by Chris Harrison.

Categories:

Comments are closed.