webmail clients truncates inline styles

Question

some webmail-clients truncates whitespaces in inline-styles. For example this code

style="display: inline; float:right; font-size:16px;

is rendered as

style="display:inline;float:right;font-size:16px;

At this point it doesn't hurt. But when I add some background-stylings, my layout crashes:

Origin:

background:#ff6600 url('http://localhost:8080/path/to/img.png') no-repeat top right;

rendered:

background:#ff6600url('http://localhost:8080/path/to/img.png')no-repeattopright;

Do you have any ideas how to avoid this behavior? maybe something like "& n b s p;" ?

cheers, mayo

Answer 1

I recommend this

<div id="test" style="background:#ff6600; background-image:url('http://www.emofaces.nl/nl/emoticons/z/zwart-en-wit-emoticon.gif'); background-repeat:no-repeat; background-position:bottom left;"></div>

See working example here: http://jsfiddle.net/DennisBetman/QTLBg/

Answer 2

As recommended before me, you may separate the styling. I offer a small improvement by using background-position-x and background-position-y

See the code here