M-J-Robbins / get-off-the-table

Experimenting with building HTML emails without <tables>
MIT License
55 stars 13 forks source link

Thin blue line around the content #1

Open M-J-Robbins opened 7 years ago

M-J-Robbins commented 7 years ago

There is a thin blue line around the entire container as seen in this picture

image

MrTomRiley commented 7 years ago

I think the blue dotted border might have something to do with this for some reason

`

`

I sent the email to myself on our test pc, running outlook 2016, and the border is not visible, however if you hover carefully round the outside of the 600px container, it changes to the same cursor you get when dragging images in word, powerpoint etc, and you can drag and make the div wider

I just don't know what value to change the v:ext to to stop it from letting you edit

The spidmax="1026" is the pixel dimension i managed to make the box when I dragged it

M-J-Robbins commented 7 years ago

These might help a little with digging into shapedefaults https://msdn.microsoft.com/en-us/library/documentformat.openxml.vml.office.shapedefaults(v=office.14).aspx & http://www.datypic.com/sc/ooxml/e-o_shapedefaults.html and v:ext http://www.datypic.com/sc/ooxml/a-v_ext-1.html

M-J-Robbins commented 7 years ago

One solution i have found is to add this code to the top of the email <div style="mso-element-wrap:no-wrap-beside;line-height:0;">&nbsp;</div>

The blue line only appears to be added to the first mso-element so by adding an additional elements before our main one we can transfer the line to that. We can then also make the line-height:0 so the element doesn't show at all.

This is not the perfect solution but it is potentially a passable one. I'd still like to understand the line better.

image

jakezneal commented 6 years ago

Do you have a link to a working example of the above solution (specifically in Outlook 2007), as I cannot seem to replicate it?

Ironically, I can get it working by using an empty table at the start of the email.

M-J-Robbins commented 6 years ago

@jakezneal sure just added it in here https://github.com/M-J-Robbins/get-off-the-table/blob/master/template.html#L28

I tested via EOA and it appears to be working fine in Outlook 2007.

M-J-Robbins commented 6 years ago

Ah simpler solution for this is simply add any element before the wrapper div. So if you use preheader text in a div then this works fine