Troidus

While reading the wonderful CSS Mastery book by Andy Budd, I came across the Gilder/Levin method for background image replacement.

What this method does is introduce an empty span before the text, and then adds the background to the span. Since the span is before the text, the background will be placed above the text, thus hiding the text and displaying a background image instead. I won’t go into the details of this method, which you can easily peruse elsewhere.

I’ve started using this method for several reasons. Recently, I used this method at a site, and added text-align: center attribute tothe enclosing h2 tag, and proceeded to code the span tag as usual. As I use Safari for first testing, I found no problems with the output. But when I fired up Firefox to test the site, I found, to my surprise that the background image started from the center of the enclosing h2. It was the same in Internet Explorer.
However, on setting the text-align attribute to left, all three browsers displayed the image from where it should have been.
You can view a simple test case I’ve cooked up in here.

I don’t have a conclusive theory for this, but what I think happens is that when an inline element is contained within a block element, and the block element has the text-align: center attribute to it, Firefox and IE center the inline element too. Safari, on the other hand, centers only the text within the element. I believe Safari has the right implementation on this one, but, I can’t be sure.