Gilder/Levin with centered text
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.
April 1st, 2006 at 7:20 pm
And text-align:left on the span itself sets it right again of all browsers?
You may want to test your theory by putting display:block on the span too…
April 1st, 2006 at 7:52 pm
Actually, setting the text-align: left attribute to the span does nothing. Setting it to the parent block tag displays it alright.
Also, as you said, display: block does make the span display correctly.
April 2nd, 2006 at 3:00 pm
Wha-hey! It’s like I’ve got a renderer inside my head!
April 16th, 2006 at 10:08 pm
Are you trying to achieve a centered image using the Gilder/Levin technique? If so, because you are using a fixed width margin: 0 auto; would be the ideal solution to center the block element.
Actually, thinking about it, I’m not sure what Safari is doing with what you described above. You need to set display: block; on the span, to allow for height/width measurements to display the image. text-align is for centering inline elements, but the span is now display: block; Best bet is to use margin on the containing element (usually a heading).
April 17th, 2006 at 8:06 pm
*trovster* : Actually, using margin: 0 auto isn’t always the best idea.
Also, it is for the Firefox and Safari anamoly that I posted this.
April 17th, 2006 at 9:36 pm
What situation are you talking about?
April 17th, 2006 at 11:49 pm
The situation where text-align: center centered the inline element in Firefox and IE, but didn’t in Safari.
August 7th, 2007 at 7:20 am
I’m a newcomer to webdesign and CSS, and have been experimenting with the Gilder/Levin ir technique. I wonder if you know of any way to add some padding to the - as a way of creating some space between the h border (if there is one) and the text - without at the same time creating unwanted space around the background image in the ?
Thanks, in advance, for any tip you’d care to share.
- Michael
February 5th, 2008 at 11:59 pm
I was hoping to view your test case, but the link is broken. Should be enough here though to experiment with centering on my own. Thanks for the article and comments.
July 23rd, 2008 at 2:57 am
Sorry, you load so much javascript, wanted to see if this is ajaxed