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

0

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;

Yup...

danjah

Posted 2010-09-14T05:43:55.227

Reputation: 395

1Because MS Word isn't a browser? – Nifle – 2010-09-14T13:56:34.800

Clearly you've completely missed the point of my question. regardless of whether MS Word is a browser or not, which obviously it isn't, I still need to know what I can pull from stylesheets fed to a browser. Dual purpose, low overheads, all of that stuff. – danjah – 2010-09-14T21:24:32.437

My point was (a bit unclear I admit) is that since it's not a browser they have probably not implemented all css functionality. They would have to stop somewhere or it would turn into a full html-renderer. – Nifle – 2010-09-15T09:27:26.263

Agreed, though I will say it's not too shabby so far (apart from the multiple classes thing), I've managed a half-decent pull from our site directly to Word - I just wish it could be slightly prettier with less faffing. Not many people seem to want to approach this subject, I might have to let sleeping dogs lie! – danjah – 2010-09-15T22:14:40.363

Answers

1

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

danjah

Posted 2010-09-14T05:43:55.227

Reputation: 395