How can I make a custom style look the same in both printed and online?

Question

My specs:
RH 9.0.2.271
Windows 7, 64-bit
Word 2010
The Background Info:
So I created some custom css styles to try and mimic the look of a message box in our documentation. Here's the css code:
.MsgBox {
    color: #000000;
    border-left-style: Solid;
    border-right-style: Solid;
    border-top-style: Solid;
    border-bottom-style: Solid;
    font-size: 10pt;
    background-color: #eeeeee;
    border-left-width: 4px;
    border-right-width: 4px;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-left-color: #cdcdcd;
    border-right-color: #cdcdcd;
    border-top-color: #cdcdcd;
    border-bottom-color: #cdcdcd;
    width: 350px;
    padding: 5px 5px 5px 5px;
    box-shadow: 10px 10px 5px #888888;
    margin-bottom: 7pt;
.MsgBoxTitle {
    color: #000000;
    border-left-style: Solid;
    border-right-style: Solid;
    border-top-style: Solid;
    border-bottom-style: Solid;
    font-size: 10pt;
    background-color: #cdcdcd;
    border-left-width: 4px;
    border-right-width: 4px;
    border-top-width: 4px;
    border-bottom-width: 0px;
    border-top-color: #cdcdcd;
    border-bottom-color: #cdcdcd;
    border-left-color: #cdcdcd;
    border-right-color: #cdcdcd;
    width: 350px;
    padding: 5px 5px 5px 5px;
    box-shadow: 10px 10px 5px #888888;
My HTML Code:
<div class="MsgBoxTitle">
    PC-DMIS MESSAGE:
</div>
<div class="MsgBox">
    <p>Please do the following steps in the indicated order.</p>
    <p>1. Remove the current SH-1/2/3 stylus.</p>
    <p>2. Attach the SHSP (Stylus Holder Setting Piece).</p>
    <p>3. Jog the probe to a safe location with a clear line of approach
     to the port(s) being calibrated. </p>
    <p>4. Then click OK.</p>
    <p>After you click OK the machine will begin DCC measurement.</p>
</div>
The Expected Output:
Here's how it renders in a browser (the title is MsgBoxTitle, the body is the MsgBox style). I'm happy with how it looks there, even if the box shadow doesn't always display:
The Ugly Printed Output:
And here's what it looks like in the printed output.
Ugly. Are there any tricks to get the printable (doc) output to match the online? Ideally, on the printed output, I'd like to have all the white space in my pseudo message box removed so it looks just like the online.

Answer 1

Hi Peter. Thanks for the reply.
I assumed that if I used the project style sheet during the export, Word would convert the style so that it looked the same as in the HTML. Is that a bad assumption? I'm currently not mapping to any template equivalent for these message box styles. I did try it as one of my attempts, but I couldn't figure it out. It never seemed to take the style in the .dot.
Anyway, if I use just 1 style, such as just the MsgBox, I obviously don't get the white paragraph between the title and message. That white paragraph comes from the first <p> tag in the MsgBox style. But I need to have the <p> tags in there because they're better for our localization process than line breaks.
I did do some tweaks that made it look better. Basically I structured it so that the MsgBoxTitle div is now inside the MsgBox div. Something like this:
<div class="MsgBox">
    <div class="MsgBoxTitle">PC-DMIS MESSAGE: </div>
    <p>Please do the following steps in the indicated order.</p>
    <p>1. Remove the current SH-1/2/3 stylus.</p>
    <p>2. Attach the SHSP (Stylus Holder Setting Piece).</p>
    <p>3. Jog the probe to a safe location with a clear line of approach
     to the port(s) being calibrated.</p>
    <p>4. Then click OK.</p>
    <p>After you click OK the machine will begin DCC measurement.</p>
</div>
And then I adjusted my styles borders, padding, and thickness. That helped it look more connected, but still doesn't look quite right:
Would love to get rid of that white space after the title.
If you have time, I would be interested in a more detailed example of how you did it.