Inline CSS Sprite

HTML & CSS
1

Hello everyone. I basically have a relatively simple question, but my searches haven’t really given me very positive querry returns.

Anyways, my question is this. Is it possible to use “inline css” for sprites?

What I’m trying to accomplish is make an email signature with a company logo linked with mouseover effect from greyed to color. Mostly what I’ve found more or less uses embedded css, but for email clients and so on for compatability usually strips the embedded out.

I did find something earlier an article “CSS Sprites with Inline Images” but it also uses embedded css.

Any help would be much appreciated. Thanks. I’ve also attached a zip file of my source files in case anyone needs to get a better idea. Thanks again.

2

I’m afraid most, if not all, email clients won’t allow for this. You can’t do :hover inline, and that’s about all that works in email.

3

That’s kind of what I was afraid of. I was doing more research here in the forums and found a thread that may be an alternative.

how-apply-inline-css-image-rollover-style-anchor

Paul has an interesting approach to an alternative. He does mention that some people use invalid style in their emails to avoid css being stripped. Could his method work?

4

You could give it a try, but I doubt it will work. Email is a very flaky medium, and many aspects of CSS don’t work in that medium. So it may work in some clients and fail in others.

5

Yeah… it is a double edge sword. I’ve been designing html emails 3 years now for my employer. Sadly, they rather send image based ad emails for their clients and all the wrong things to do.

Paul’s method works fine in a web page but my email tests failed. I kind of suspected it wasn’t going to work, but I thought I’d give it a shot and look for an alternative or something. Was hoping though since some css works.

Campaign Monitor has a nice list of what’s supported for a variety of email clients and web mail. htmlemailboilerplate does have some work arounds and hacks to fix email issues but nothing for sprites or image replacement.

Anyways… thanks.

6

I guess you could try an animated gif if you need to have something moving. :slight_smile:

7

HTML e-mails tend to only do HTML 3.2 with LIMITED CSS support. Fancy effects like you are asking for are right out the window.

Probably why I don’t use HTML for e-mails in the first place; well, that and I have my server set up to block them as no LEGITIMATE e-mails I expect to get would need HTML in the first place!

8

Originally Posted by ralph.m I guess you could try an animated gif if you need to have something moving.

lol yeah I thought about that too. A .gif would somewhat get their attention, but I don’t think it’s really needed unless clicked on which is why I wanted to try a mouseover.