When we first started this blog, I swore that I would post even the simplest of fixes I came across, and here is a fine chance — so I’m taking it!
While coding our new website layout, I ran into a problem that I had somehow always avoided before. Using the Phark Image Replacement method for creating simulated “alt” text for non-images (like a logo or header), I was unable to get the text in my element to disappear like normal.
Here’s the normal way of using image replacement:
a#logo { text-indent: -9999%;
background: url(images/some-image.png) no-repeat top left;
width: 100px; height: 50px; }
Finally, it dawned on me: I had a text-align: right also in this style that was messing it all up. So what’s the final takeaway from this post?
Negative text indents do not work when accompanied by a right text-align.
