Yet another blog about PHP, HTML and CSS

I couldn’t possibly explain my frustration from Microsoft switching Outlook’s rendering engine to Word so I better don’t even try. Instead, I’m going to tell you how to make Outlook/Word position elements absolutely.

The idea originally came from doublethink (written in Czech) who made a text field in Word, saved it as HTML and then dig through the mess to extract the essence. I just went a step further and did the same for images as well.

Start by adding this to tag HTML:

Images

We’re lucky Word knows how to insert pictures and “wrap” the text behind/above the picture.

Place the whole thing directly into BODY, both parts where the image is supposed to be. Please note that the IMG tag will be used only for engines other than Word and MSIE.

ID “headerImg” is there to provide reference for further formatting - although don’t expect it to work in Word/Outlook.The only universal method is to use inline CSS via STYLE. Also like it or not, you’ll have to duplicate your formatting definition - define it both for V:SHAPE and for IMG (or DIV, see below).

Others

Other stuff must be wrapped in a div like this:

I’m sure you have already guessed the meaning of attributes filled (background color) and stroked (frame border). Remember, this is Word so we’re talking about a “text frame”.

That’s also a reason why you have to use margin-left and margin-top instead of top and left, or even margin: top right bottom left. And don’t forget to add width to every absolutely positioned element - in numbers, “auto” doesn’t count.

Duplicate formatting

Sweet, huh? Here’s what I used to make my life easier. We’re PHP programmers, remember?

The output will still contain duplicated formatting but at least, you have a single place for changes.

How to debug

The first method that comes to your mind is probably to run your mailing script and then wait for the e-mail to arrive to your Outlook. Since we’re in fact debugging for Word I preferred to open it directly in Word. I wrote my script to display the HTML “e-mail” as a web page instead of sending it and then I opened the url in Word via CTRL+O. You are allowed to paste a url and Word downloads it.

For command line lovers (like me):

You’ll have to be careful about local cache so append fictitious parameters in order to force reload:

During early stages debug locally with dummy data, of course. No need for the HTML page to be generated by a script using real data. Note though, that when you open a file in Word you cannot write to it using another editor. And when you save from Word you get back all the marvellous garble that you have worked so hard to erase. Enjoy!

Some formatting must be applied to a child element

Did I mention that text-align: right works only when it’s NOT in the DIV we position but in its child? The same is true for font-family, font-weight and font-size:

will work while if you join the two DIVs together, it will not.

This entry was posted on Thursday, October 2nd, 2008 at 9:20 pm and is filed under CSS, HTML e-mail. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.