![]() In some instances the white line occurs within another colored table. But if your image is 205px x 205px - this when halved would become 102.5px - adding an odd number into the mix. For example, an image 200px x 200px when displayed at half the size would work out to 100px x 100px - this should not cause an issue. ![]() If the image height cannot be divided by two and not have a decimal, the remainder could cause a 1px line. ![]() If you are using retina images, or images twice the size to enable better rendering on retina(higher resolution) screens. By setting all images to display:block, this gap will be removed. This can be confused with the 1px white line bug or add more pixels into the mix. Often when adding an image in a container, the closing tag is on the line after, and this adds a 4px gap. Img elements are by default display:inline therefore behave like text and any gap after them in the code will be treated as a space. By ensuring border=”0” or border-collapse: collapse is set or that no border is set on elements, you can save yourself a headache. If you are stacking images with links on top of one another, some versions of Outlook will add a border surrounding the image or element. If you have set heights and not everything is using relative units, sometimes 1px gaps will appear at odd levels of zoom, I can’t count how many times someone has said, “It was caused by the recipient having 125% zoom.” This will also allow you to narrow down where a problem is, if a white line occurs. The more pixels being added together, the higher chance of coming out with an odd point amount. Try splitting the email into manageable smaller sections, often called modules. Keep tables/sections short and contained. Make sure font-size, line-height, padding, margin and any other coded pixel numbers are even and you could mitigate it being a problem. The 1px line comes from Outlook converting px to pt - and if that ends up odd - like 13.5pt, the remaining 0.5 can cause a tiny white line.Īnother theory about the white line is that it is a UI bug and nothing to do with your HTML - I know it’s no consolation when your client keeps getting it, but the way the window is set up, the Ui font-size, dpi settings on Windows, even just using the text zoom provided in the interface, can all lead to the bug appearing. As a pixel is 0.75 of a point (at 96DPI), our pixel values can end up uneven (e.g 18px X 0.75 = 13.5pt). Why is this an issue? While Microsoft knows about the bug (and so far have been silent on it), testing suggests the bug appears when Outlook converts pixels to points and ends up with a decimal number. In applications, 1pt is equal to exactly 1/72th of an inch in traditional print technically 72pt is 0.996264 inches, although I think you'll be forgiven for rounding it up! The 'point' (pt) on the other hand is a fixed unit of length, commonly used to measure the height of a font, but technically capable of measuring any length. So, if a font is 12 pixels in height, that means it takes up 12 pixels on your screen from the top of the letter, to the bottom, which also includes the characters that have sections which are under the guide-line, such as a “p” character. It is a measurement of how tall a font is in pixels which are visible on your computer screen. ![]() This meant that HTML and Cascading Style Sheets (CSS) items not handled by Word were no longer supported (and explains why pre-2007 versions of Outlook are much better at rendering HTML emails).Īs an editor primarily for print media, Microsoft Word (and thus Outlook) uses points (pt) for font size instead of pixels (px). In what many might describe as a backwards step, Outlook 2007 was the first Outlook to switch from Internet Explorer rendering engine to Microsoft Word 2007's. So if it’s not a problem in your HTML, why do these lines appear? On many occasions, we’ve tested the same HTML and seen the bug on one test but not another. What makes this bug so difficult to fix is it’s inconsistency and difficulty to replicate. (the same email test/html with bug appearing in different places in Outlook 2019 120 DPI)
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |