CSS help

[Mutt]

fuck CSS, all i'm trying to do is add some link text to the right of these icons and no matter what I try the link text ends up going under the icons on a new line.

how can i get the text to the right of the icons?

 <ul>
                    <li><a href="#."><img src="images/facebook.png" alt="" /></a></li>
                     <li><a href="#."><img src="images/linkedin.png" alt="" /></a></li>
                      <li><a href="#."><img src="images/twitter.png" alt="" /></a></li>
                    </ul>

[fris]

i would do it a different way.

example

html example

<div id="footer">
    <ul>
		<li><a href="http://www.gfy.com/feed/" class="feed" title="Subscribe to the GFY feed">Feed</a></li>	
    </ul>
</div>

css for this

#footer ul li a {
    display: block;
    float: left;
    padding: 3px 15px 3px 12px;
    color: #999;
    text-decoration: none;
}

#footer ul li a.feed {
    background: url(images/icon_feed.gif) 0 60% no-repeat;
}

#footer ul li a:hover {
    color: #4E677A;
    text-decoration: underline;
}

of course you would have to take into consideration the size of your icon.

[Mutt]

i would do it a different way.

example

html example

<div id="footer">
    <ul>
		<li><a href="http://www.gfy.com/feed/" class="feed" title="Subscribe to the GFY feed">Feed</a></li>	
    </ul>
</div>

css for this

#footer ul li a {
    display: block;
    float: left;
    padding: 3px 15px 3px 12px;
    color: #999;
    text-decoration: none;
}

#footer ul li a.feed {
    background: url(images/icon_feed.gif) 0 60% no-repeat;
}

#footer ul li a:hover {
    color: #4E677A;
    text-decoration: underline;
}

of course you would have to take into consideration the size of your icon.

thanks, gonna add the float left

[grumpy]

<li><NOBR><a href="#."><img src="images/facebook.png" alt="" /></a></li>

or set in css white-space: nowrap;

[fris]

thanks, gonna add the float left

http://jsfiddle.net/r2HY3/

here is a live example of this.

[redwhiteandblue]

Try

li a img {display:inline;}

[Mutt]

dumb me - the <li>'s had a width that was too small to fit the text in one line

thanks for the CSS tips