I am working on a template for HTML Mailings. At the moment I have a well constructed template with almost no errors.
Due to the default scaling in W10 (125%), I need the template to render nicelye in Outlook 120 dpi mode. However this is where I am struggling.
The 2 images added to the post show the problem. A small clickable grey line appears at some tables.
Any suggestions.
Unclicked Table space
Clicked Table Space
The issue here was that the tables were not enclosed in a single 100% width table. By nesting the content of the mail in a and the issue is prevented.
Nesting of tables is key.
The implementation can be found on my Github.
Link: https://github.com/Tom-Br/HTML-MailTemplate
Related
I'm using Bootstrap to build a webpage. The page looks as it should on desktops and laptops. However, when viewed on mobile phones, the bottom half of the page's content is cutoff. This happens only on mobile phones or windows resized smaller than 991px wide.
I tried sifting through the included Bootstrap CSS file but couldn't find any style rules dictating any behaviors like the one I describe.
I've attached two screenshots: Fig. 1 is the intended behavior--the content ends with the embedded contact form. Fig. 2 is the puzzling behavior--the page just ends in the middle of the pricing table.
The site is grillemasters.info
[Fig. 1] http://i.stack.imgur.com/uH7MB.png
[Fig. 2] http://i.stack.imgur.com/h2190.png
Without seeing more information (e.g. try to post the minimum amount of HTML that still exhibits this error) it's hard to prescribe a solution. But here are three possible things to check out:
Mismatched (Incomplete) DOM
If you have an open-element (e.g. <div>) without its close (</div>), HTML behaves in mysterious and often irreproducible ways. This often includes mis-styling all elements after the mismatch.
Bad Character or Incomplete File
If you are uploading via FTP and the connection is interrupted, you may only be looking at a fragment of the file. Try deleting and re-uploading. The same thing would happen if the browser or FTP client encountered a character that made it stop reading the file — both of which might lead to a mismatched DOM.
Unnecessary body CSS
Make sure you don't specify the height of body or html anywhere (or any other global, all-containing elements). The page should flow naturally, without you specifying a height: 100%.
[EDIT] I looked at your site (which redirects to http://www.supsean.com/grillemasters/, in case others are interested in debugging outside a frame). Look at the top of your page when you resize the screen to such a small size; there are quite pervasive CSS issues, likely caused by position: fixed or absolutes where they needn't be.
Try resolving that, and I suspect you'll stumble across the solution to this question as well.
I am making an email template. I gathered that outlook would be quite uncooperative anyway. So have made some exceptions in the design.
However I am generating content via PHP and this retrieve an image from a DB seamlessly.
What I am getting however is the image being rendered like the following:
(he thin line on the side)
when in Hotmail it appears as a full image.
I have tried CSS such as display block/inline and adding heights and widths to it. I'm guessing its how its being created though.
Any help would be much appreciated.
Why don't you load in an outlook template, with images and then view source to see how it was done.
I recently mocked up an e-mail marketing (mail chimp) e-mail in Photoshop, and exported it into HTML (using tables and inline styles (unfortunately) so that it appears correctly in all/most e-mail clients.
However, after sending myself a test e-mail to see how it appears in my Gmail account, I can see there is a white dividing line between each row of my table, which I cannot seem to remove or find when I inspect it in Google Chrome.
Can anybody tell me how to remove these dividers?
My full HTML can found at http://pastebin.com/gJWJGEak#
A screenshot of how the email is currently appearing can be found at http://img521.imageshack.us/img521/346/screenshotvg.png
I found your problem. It has nothing to do with borders, but with the size of the text inside the cells.
Your text expands too much and it causes the containing cells to expand.
If you reduce the text size or the margin of the paragraphs you'll achieve the desired result.
I hope it helps! :)
All of your images need to be explicitly style="display:block;".
And just a heads up, background images won't work in Outlook 2007 and 2010.
I am having a real problem with a tables being rendered incorrectly in IE in an e-commerce store I'm setting up for a client. Here's the link:
http://jpgrv.zjbzq.servertrust.com/products-s/1819.htm
The tables are the areas the actually products are contained in. If you look in IE, you'll see that the height of the rows are too high. I've tried to apply CSS directly to the rows and to the columns (inline, external stylesheet and internal stylesheet).
I had a thought that maybe the images were too tall so I resized them and tried it, but to no avail.
I've done a Google search knowing that there are quite a few bugs in regards to tables and IE but none of the known issues that I've found have helped me find a solution.
BTW, as you look at the source code and inspect the site, it may look like a crazy mess of tables, etc. which is because this site is built within the Volusion framework so there's a lot of dynamically generated content.
If anybody has any suggestions or can point me in the right direction, I would greatly appreciate it.
The extra height is there because of a div "add_button" inside a div "container".
You can see it is this screenshot:
I have been given an existing table layout (for tabular data) with the task of making it as accessible as possible.
I added a caption tag to each table within the layout and I realized the caption width is not consistent across different browsers. After a bit of trial and error with CSS, I managed to get it right on all the browsers I need to support aside from Firefox (very last release) where the tables are larger than their own captions (with same width declared in the CSS)
I have googled a bit and this seems to be a known issue.
Any standard solution/suggestion for this?
Thanks in advance
Mirko
Keep in mind that captions don't HAVE to be visible and they still will be accesible, for instance if you hide them (display:none OR visibility:hidden), the width won't matter, as they won't be "seen" in the page, however a screen reader will still pick them up.