Member Avatar for pympickle

Lately I've been having a problem when the files are uploaded.
Usually when I finish my layout in Dreamweaver, I send my work to the IT Department to upload it. They upload the files and send them out as e-mails. (which are e-newsletters). When I view the newsletter in the e-mail page the layout seems to have a problem.

it turns out like this

which really it has to look like this

but when I click the link to view it as a html page, there seems to be no problem.

If you would kindly answer my question, I would really appreciate it, cos i've been having this problem for a week and somehow nobody seems to know. I really don't know how to solve it.

Thank you very much :)

Pym

  • 3 Contributors
  • 2 Replies
  • 94 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by scrappedcola

Dani AI

Generated

This is a classic browser-vs-email rendering issue: the page that looks fine in a browser can break once converted into an email because many mail systems strip or change CSS and wrap the HTML before delivery. supplied screenshots that match that symptom, asked for code, and correctly flagged client rendering differences. The advice below focuses on practical fixes and a short, repeatable workflow.

  • Inline all CSS before sending. Most clients ignore external styles and many strip <style> blocks. Use an inliner (online or build-step) so every rule appears on the element itself.
  • Convert the layout to a table-based, fixed-width structure and avoid floats for core layout. Tables remain the most reliable way to preserve column geometry across clients.
  • Use fully qualified (absolute) URLs for images and hosted assets. Ensure images include explicit width/height attributes and inline display:block; border:0; to avoid gaps.
  • Set table attributes like cellpadding="0" cellspacing="0" border="0" and explicit width on table cells. Relying solely on complex CSS for spacing is fragile.
  • Do not depend on advanced CSS3 (transforms, floats for layout, advanced selectors). Use simple, widely supported properties.
  • If IT pastes HTML into a mail client to send, request the final inlined HTML file (or an .eml) to confirm nothing was altered during the sending process.

Quick test workflow: produce the final HTML, inline CSS, upload images to a public path, send test messages to several clients (Gmail web, Outlook desktop, Apple Mail, mobile), then view the received message source to see if the markup was wrapped or modified. If Outlook-specific fixes are required, add targeted fallbacks or conditional code.

Helpful resources for support matrices and tools: Campaign Monitor’s CSS support guide (Campaign Monitor CSS Support), the Can I Email compatibility database (Can I Email), and an HTML/CSS inliner service (Premailer).

Recommended Answers

All 2 Replies

Member Avatar for ko ko

Post some of your codes you thought that the problem came from.

Member Avatar for scrappedcola

Are you viewing the newsletter in outlook and have you recently upgraded from Office 2003? If so you just have to change your CSS a little bit. When Microsoft created the Office 2007 (and beyond) they decided it was in their best interests to not use the same rendering engine as IE6 and instead use the embedded rendering engine in Word. What this means to you is that you need to code like its the early 90's. Here is a helpful MSDN on what Outlook will support: http://msdn.microsoft.com/en-us/library/aa338201(office.12).aspx. Your best bet would be to open the HTML in Office first to see the layout.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.