Align Images with Text (Span + CSS Backgrounds)

HTML & CSS
1

This is the problem I’m currently facing, the images are suppose to be “indenting” with the text but instead they’re breaking lines. I’m using spans with id and then using CSS with backgrounds to replace the images, i tried many things but still no luck. Any suggestions?

Here’s a picture for better understanding:

2

Hi, impossible to tell without a link ;).

DO the spans have display:block set? Are there any block elements wrapping the words? If so, that’s your issue :slight_smile:

If the above isn’t true, then post a link and we will help :slight_smile:

3

Here we go! I’m using display block for the spans and i’m not wrapping it (I think).

Here’s the link:

http://igotjosh.com/sitedev/

4

Yep, on #f and #rails_logo you set display:block. Remove that :slight_smile:

5

You will probably need to use display:inline-block to control it a bit better.


#f {
    [B]line-height:25px; 
    display:-moz-inline-box;/* ff2 - remove if you don't care */
     display:inline-block;    
     height:25px;
    width:20px;[/B]
    background: #3b5998 no-repeat center;
    border:1px solid white;
    text-align:center;
    text-transform:uppercase;
}