Previous Message
Next Message

Vertically Centered Inline Graphic - Safari Bug?

Sent by Jeff Ferrell on 17 June 2004 01:01


I've got some PHP-generated smiley images (WordPress automatically 
substituting graphics for ascii) that I'd *like* to have centered in 
the lines of text in which they appear, instead of floating over the 
baseline. In order to tweak the spacing, I've got the code setting them 
as background images in a <span> -- that way I can specify a 50% 
vertical offset, like this:

<span style=\"background: 
url($img) 50% 
50% no-repeat; width: 18px; height: 18px; border: 1px solid black; 
display: inline-block\">&nbsp;</span>

[*from the PHP code]

So far so good, right? I'm curious about this, though: In IE6/Win, 
everything behaves as expected -- the smileys are centered in the lines 
of text. In Safari, though, the images are still even with the 
baseline, even though there's an offset specified. Anybody know why? 
(See it in all its glory at

Some notes/clarifications:

1) A pixel offset will work in Safari, but starts to clip the bottom of 
the images for some reason in IE. Hm.

3) The style needs to be inline, because of that $img variable, there. 
There's no way I know of to grab that through a style sheet, so no 
chance to specify pixels for Safari but hide for IE, I'm afraid... I 
can't think of a way to slap a class or anything on it...

2) I'm not *too* concerned about this, since IE6/Win is probably 98% of 
my audience. But *I* look at it in Safari, and it's a shame to have to 
look at superscripted smileys. I can live with it, interest 
is academic, more than anything.


   Jeff Ferrell                   |   English - IT - Fine Arts
   Rhea County High School        |   Tel: 423.775.7821
   Evensville, Tennessee          |   Fax: 423.775.7823
   ferrellweb ->
   Beyond the Bookshelf MUSH ->
   Mr.Ferrell@BtB MUSH         |   Beyond the Bookshelf
   Enki@BtB MUSH               |

css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: