How to get CSS background images to show up in HTML files opened by Word?

Question

Hi all,

My question is specifically what I'm after, but I'm also interested in 'general rules' around how to preserve styles when opening an HTML page in Word. More information on my context follows.

The HTML file being opened in Word has <link ... /> elements including stylesheets. everything displays normally in a browser.

So far I discovered that elements with multiple classes don't have their styles carried over, nor anything nested, when based on an element with multiple classes.

Consider this:

<p class="class1">This <span class="class1 class2">is my</span> text.</p>

.class1 { color:green; }
.class2 { color:orange; }

.class1.class2 { color:red; }

.class1.class2,
.class1 { color:blue; }

Results in:

1. p is green because its first declaration holds
2. p is not blue because that declaration is part of an 'invalid' multi-class declaration (!)
3. span is orange because its first declaration holds
4. As with point 2. span is not red, nor blue, because of the 'invalid' multi-class declarations

---

As a result of the above findings, I ended up wrapping my elements in another element, always with a single markup class name, and formating things successfully on that basis.

Note that it's fine to manipulate elements with Javascript, adding/removing extra class names as required, Word is only interested in the actual markup in the HTML file it is trying to parse.

What I didn't figure out is how to get relatively linked CSS background images to show up when HTML files are opened by Word. I usually use the shortcut: background:transparent url(../img/icon-audio-16.gif) left top no-repeat; which didn't work (yes, checked my paths), but then neither did a blow-by-blow breakdown:

background-color:transparent;
background-image:url(../img/icon-audio-16.gif);
background-position:left top;
background-repeat:no-repeat;

---

I asked on SU.com as well, best I got so far was "Because MS Word isn't a browser? – Nifle", who pretty much just missed the point.

Yup...

Answer 1

To any interested parties, this seems to sum everything up: http://msdn.microsoft.com/en-us/library/aa338201(office.12).aspx