Super User is a question and answer site for computer enthusiasts and power users. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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 { 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-position:left top;


share|improve this question
Because MS Word isn't a browser? – Nifle Sep 14 '10 at 13:56
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 Sep 14 '10 at 21:24
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 Sep 15 '10 at 9:27
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 Sep 15 '10 at 22:14
up vote 0 down vote accepted

To any interested parties, this seems to sum everything up:

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .