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.
noname
john
michael
Oxay
Pingbacks and Trackbacks
This is the TrackBack URI for this post.
There are currently 0 pingbacks/trackbacks (Show)10 Comments
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…
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.
:)
Wha-hey! It’s like I’ve got a renderer inside my head!
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).
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.
What situation are you talking about?
The situation where text-align: center centered the inline element in Firefox and IE, but didn’t in Safari.
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
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.
Sorry, you load so much javascript, wanted to see if this is ajaxed
Leave a comment