问题
I am working on multiple emails for a client who is using Outlook 2010 version 14 for a PC in their office. No matter how the email is created the right side of the table is blown way out.
For example:
Email #1:
Email #2:
This is the code: view-source:http://fortworth.dmplocal.com/main/index.php?action=viewsenthtml&id=95&ids=e9499cb22fd2fbaee560c877a2716fa0aab6880d
I have done a lot of searching to try and figure out what I could do to fix this, below are some things:
- Took all CSS inline
- Made sure all cell padding, cell spacing, and borders were set to zero
- Specified width for tables
- Specified height and width for images
- Made sure images were the height and width that is specified in the code
- Made images jpg's versus png's
- Removed all unnecessary white space
- My table is not more than 23.7 inches in height
I have read a lot of forums and found that a lot of people have problems with Outlook as well, but I have not found one that has the big space to the right of the table thus pushing it out that mine has.
Any help would be greatly appreciated!
回答1:
For HTML tables, specify the width
and height
using HTML attributes rather than CSS styles. Modern versions of Outlook ignore width
and height
styles.
As @MarcB mentioned, Outlook 2007/2010/2013 uses the rendering engine of Word to render emails. Previous versions of Outlook used the rendering engine of IE. This shift caused significant changes to the landscape of HTML emails.
Below is a partial list of features not supported by Outlook 2007 and up:
CSS styles
- float
- position
- display
- width
- height
- padding (doesn't work on div and p tags)
- background-image (only works on the body tag)
- list-style-image
HTML attributes
- alt (img)
- background (table, th, td)
- colspan, rowspan (th, td) (there's conflicting info on this, but it does appear to be supported, as long as a value of 0 is not used; however, it's often recommended to nest tables instead of using colspan and rowspan)
Miscellaneous
- Animated GIFs
- HTML forms
回答2:
Try placing />
to close the image tag. This alone worked for me. This is a problem wholly invented by MS. As if it wasn't bad enough before.
回答3:
@MattCoughlin's answer is right insofar as Outlook code. However, I would also add that Outlook is really specific about column and row counts.
Therefore, check that the number of columns add up. Use empty cells and colspans where necessary.
回答4:
I just did some edits to your code and put up a fiddle for you to test.
http://jsfiddle.net/YWnzc/135/
But I could't check what I have done in my outlook 2010, but I think there are a lot of limitations in outlook 2010
http://fixoutlook.org/
Let me know how it goes.
further I also see that you have tables nested in your code. I dont hink this is necessary. seeing your mailer design this should be a pretty similar and the pronlem you are reporting should not be there, if it was properly coded.
回答5:
As for me outlook ignored width of div, so if you code it like:
<div style="width:500px">
<table width="100%">
...
</table>
</div>
the width of table would be expanded to 100%, so try nesting all of fixed width elements inside tables and set fixed with to these parent tables (note that table also needs style), like:
<table width="500px" style="width:500px">
<div style="width:500px">
...
</div>
</table>
this will give you the width needed
来源:https://stackoverflow.com/questions/12010129/large-gap-in-table-outlook-2010