/ Email Development

Why sometimes correct width matters in email development

I was asked to solve a render issue in Lotus Note 8/8.5. Well, the first thing come in my mind is that Lotus Note 8/8.5 is using IE 7 render engine.

And then, the problem was I can't perfectly align the image to the right. So I took a deep look and found that it is the correct width that matters.

Here is the screenshot of the debug mode as a IE 7 view. (Mind that I've hide some client data as usual.)

Screenshot of IE 7 view

As you can see the outer table was set to 290px and the innter table was set to 100% but with the td set to 270px wide and align set to right. According to what we've seen, the only one td inside the table will always has the same width as the table. So it should be 290px wide not 270px wide. But from Offset you will find that the left offset is actually smaller than the render in a normal IE view below - above image is IE 7 view, below is IE 11 view.

Screenshot of normal IE view

In IE 7 view, it's showing 64px left offset. And in normal IE view, it's showing 84px left offset. So the 20px comes from the difference of 290px wide and 270px wide we mentioned before.

So I assume the IE 7's document mode is having some issue with correctly calculating the offset of a right aligned element. To avoid this, you need to make sure the width in your code makes sense - which means, in this case, changing the 270px td to be 290px wide can solve the issue.

Or from my perspective, if you don't care the render in IE 7 or Lotus Notes 8/8.5, you don't need to care about if the width makes sense. The advanced browser can correct it for you.

Please let me know if you have any advise for this post. Email cyxjimmy@gmail.com.

Woody Chai

Woody Chai

I love HTML, CSS and JAVASCRIPT. I'm an developer working on SFMC (AMPScript, SSJS, SOAP/REST API). Love to work on all kinds of issues and dig out new technologies.

Read More