CSS based smileys

programming web dev
1

Hi :slight_smile:

I’ve run into a problem that is pretty annoying.

I want my smiley’s to be based on CSS, so that they are based of a background image in a span, instead of the traditional images.

Why? Well that way it doesn’t get on print, and i can make my javascript based text-to-smiley (Or smiley-to-text) functionality work in the best way. (I don’t want to store image addresses in my javascript - it should be oblivious to such things) And third: I’m using CSS for themes, so every image on my page must be defined in CSS, and not directly in the CSS. (I don’t want the server waste time on sorting themes)

The format is like this:

<span class=“smiley smiley-sad”></span>

That way i can define some rules for all smilies, and properties for each within my CSS - and thereby have different smiley’s for each and every of my CSS themes.

However, i cannot make the span act like an image would - it adds a line break instead of being in the line of the text. (Don’t confuse inline here - an image is block by default, and my span must be so as well in order for it to have any size)


.smiley {
    display: block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
}

.smiley-smile {
    background-image: url(smile.gif);
}

.smiley-sad {
    background-image: url(cry.gif);
}

.smiley-wink {
    background-image: url(wink.gif);
}

This is my CSS.

You can see what I’m talking about here:
http://www.ipwn.dk/smiley-issue.html

(You can toggle the smileys on/off on the right sidebar)

So, how can i make my smileys appear in the line as an image would through CSS?

Thank you :slight_smile: