Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
images not staying within table width

Gandhi

Newbie
Total Posts:  6
Posted: 29 November 2016 06:53 AM

Hi all,

i’ve been having this issue for quite sometime now…...

i’m creating an image based email…. that just keeps breaking…..

either massive vertical white spaces, or horizontal white spaces…... and the images don’t stay inside the width of the table….

i’ve tried to keep things simple but i just cannot get it to work….

i’ve attached the code, screen shot from my phone and my desktop machine

any help would be awesome…..i just don’t know where I’m going wrong

Image Attachments
in-desktop-browser.jpgIMG_20161129_202840.jpg
File Attachments
code.txt  (File Size: 10KB - Downloads: 56)

 

Alex Ilhan

Avatar
Administrator
Total Posts:  203
Posted: 29 November 2016 11:30 PM
[ # 1 ]

Hi Gandhi,

I’ve had a look at this for you, it seems as though you’ve sliced this in Photoshop and exported the HTML. It’s a good start, but unfortunately you’re missing a few bits in the code.

As a base, I would try using a HTML boilerplate or template. I would recommend checking out this fantastic boilerplate by Ted Goas: http://tedgoas.github.io/Cerberus/

If you struggle with anything in it let me know, and I’ll be happy to help. Pay attention to what he has in the <head> section and this will help with some of your rendering issues.

Many thanks
Alex


 

Gandhi

Newbie
Total Posts:  6
Posted: 07 December 2016 09:43 PM
[ # 2 ]

sorry but i’m very confused…......

with the boilerplate should which i be looking at? fluid, responsive and hybrid…

also should i take code from the boilerplate and place it in to my design or vice versa?

i’ve tried placing the head code into my design….but nothing changed…...

there seems to be alot of tables within tables…..which my design doesn’t have

there is so much extra code that i don’t understand…. i really just want this to be as simple as possible

thank you for your help

Gandhi


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 08 December 2016 06:01 AM
[ # 3 ]

Gandhi,
Unfortunately email code is anything but simple. A boilerplate (or template) is a good start, but it will require some custom coding to get everything looking perfect.

Table based design is used to make sure emails look good in Outlook (various versions).

Most emails that are built using sliced images nest each image in a TD and use colspan and rowspan to make sure that all of the TDs line up correctly.

I hope that helps!


 

Gandhi

Newbie
Total Posts:  6
Posted: 20 December 2016 02:49 AM
[ # 4 ]

The thing with all of this….. is up until recently i never need a boilerplate…...........all i had to do was export from photoshop….. open in dreamweaver….. edit a very very small percentage of code…. and i was ready to go…. ive been doing this for years

then recently i did it exactly the same way…. and it broke….totally…

i’m really sorry but the boilerplate…for me… has only lead to more confusion…..

my design is only images…..nothing else….. the boilerplate seems like its full of code i don’t need or understand…. i don’t need a fluid or responsive design….i just need tables filled with images and links on the images…. there is so much code that i have never needed before…..

I’ve simplified my design…..2 columns full of images…..but still i get white spaces between the images horizontally??

surely i only need 1 table sub divided for each of the images…. so i can then place links on them

i’ve attached an image and the code that i have been placing into mailchimp…..

this is totally stressing me out as ive not changed how i do things…..

any help would be appreciated

thanks again

Image Attachments
Untitled-1.png
File Attachments
code2.txt  (File Size: 14KB - Downloads: 54)

 

Gandhi

Newbie
Total Posts:  6
Posted: 22 December 2016 06:29 AM
[ # 5 ]

hey guys soooo i’m still trying to get this to work…...

I’ve added as much code as i can understand to my design from the boilerplate…..it still breaks in hotmail….. its a little better on the mobile version

i then removed all the code…. and its obviously still broken…...

and what is most annoying is when it first loads in hotmail it’s perfect for a fraction of a second….then it just pops apart right in front of me!!

there has to be a fix for this? this just seems crazy….

Thanks again

and Happy Christmas

Gandhi


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 27 December 2016 02:10 AM
[ # 6 ]

Gandhi,
It looks like you may need to put a bit of work into this template to make it functional in all clients. Unfortunately, I can’t really say why it used to work straight from photoshop and no longer works.

If you’d like to hire an email dev to help sort these kinks out, take a look at our list of professionals here: https://www.emailonacid.com/blog/article/eoa-news/email-professionals-directory-hire-one-today


 

Gandhi

Newbie
Total Posts:  6
Posted: 04 January 2017 12:35 AM
[ # 7 ]

I dont have the money to hire anyone…..

so i checked through my old emails that i had sent to myself through mailchimp to see if there was a problem…...and when it loaded it was fine…. sooo i decided to take that code and resend it through mailchimp to hotmail….............and the horizontal white spaces appeared!..... therefore i can only assume that something has changed with hotmail since july/august last year that is now breaking my emails…....

if you know anything about this, that might help that would be great….

thank you again for you advice and help

happy new year!! smile

Gandhi