I have trouble finding what's causing the last td element in my table to be vertically offset in Outlook '07, '10, '13 and '16.
The last row will always be offset. I tried looking at line heights, heights, widths, line breaks, but to no avail.
Does anyone know why this is happening?
Ok, found the issue was an empty I used for adding spacing (some clients don't support margins). I used an empty table to for spacing instead (nasty, I know).
Related
Having struggles trying to get the following view to work across devices, this is just one of many of my auto-layout issues. I have some text next to a UISwitch, on devices that are large enough I am happy for the text to be on a single line but on smaller devices the text can be split across multiple lines, I just can't get it to work correctly, it either appears like the screenshot or somewhere else messed up no matter what constraints I try to apply.
The middle image is iPhone 7.
I know this question is old, but it is something I encountered myself recently.
In the storyboard, you should set the label's horizontal Content Compression Resistance Priority to 749.
Looks like the trailing side of the switch is not constrained to align with the trailing side of the text field and other UI elements. Also make sure there is no constraint for the width of the text, as this is what will stretch.
I'm kind of confused how the neat grid works when using block-collapse - assuming a 3 column grid, the first two column result in a width of something like 34....% and the third column is around 31...% so I'm not getting three equal columns next to each other.
am I missing something here?
block-collapse removes the margin gutter, and adds it to the block. This works across the row until the end, when the final block just takes up the remaining space. This is why you are seeing a smaller last column.
If you have a row, and set that to $display: table, then children of it will be displayed as table cells, which will give you an even distribution across the row which I think is what you are after.
Pen is here:
http://codepen.io/mikehdesign/full/jPmWza/
Here is an image showing a standard set of columns, block-collapse and a table display:
I don't know anything about HTML codes and I'm using the 'Galauness Blogger Theme' I found on the internet. I changed some things that weren't too hard and the only thing I currently don't like about my blog is the fact that it seems like the wrong title belongs to the wrong blogpost.
If you visit my website it looks like the second row of text belongs to the first row of images but that isn't the case.
Would anyone mind helping me with a) decreasing the space between the text and the image or b) increasing the first row of images and the second row of text?
My website is www.lemontierres.com
Thank you in advance
Decreasing the space between headline and image is possible, but can get complicated. The reason is each headline in your CSS has a height set to 40px and a padding of 10px. You'll find this in the css for the selector .post h3. If the height:40px; would be removed, it looks better as currently all your headlines only have one line, but in case of a single headline with 2 lines the three entries in each row wouldn't be aligned anymore - the fixed height takes care about keeping everything aligned.
To have more space between the entries, you can add padding for a wrapper element - e.g. every entry is wrapped in a div with the classes post and hentry, so adding
.post.hentry {
padding-bottom: 30px;
}
will add more space between each row.
I've noticed that adding padding to the outermost wrapper - the div with the class date-outer - leads to weird results, but adding it to .post.hentry seems to work.
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!
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
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.
#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.
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.
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
I have a SSRS RDL that is formated to fit on a three column lable sheet. When exported to PDF the 2nd column is not populated and on the next page the 2nd column is the only column populated. This continues to happen for as much data as I have. Has anyone had any problems with this or might have an idea on where the problem might be?
These kinds of quirks are usually related to the margins. Make sure that the actual label area does not exceed the page size, accounting for the margins. Also, printer drivers can cause a similar issue because of content-to-page-size issues, where the report shows correct on-screen but when printing, shifts content to a new page.
This is because of page setup properties. For example if a page is set to letter size(8.5in X 11in) and left and right margins to 1 inch. then you have adjust you report body size to 6.5 inch or below, if it exceeds above 6.5 inch, then leads to split data to other pages when exported to PDF.