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.

 
   
Photoshop slices to Dreamweaver problem

commodorecrush

Newbie
Total Posts:  2
Posted: 17 November 2010 10:29 PM

Sorry if this was already answered.  The search didn’t show anything though.

Anyways, I’m having a problem with a design that I made in Photoshop, sliced and finished designing in Dreamweaver using simple html (tables, no css, etc).

When I preview it, it works and looks seamless. When I upload it to my server and view it, it still looks great.

But, when I insert the html into an email, the slices seem to shift all over the place and looks horrible in both Outlook 07 and Gmail.

Am I missing something here?

I can’t paste all of the code in here because it’s too many characters, but you can view the source of the page above.

Any help would be greatly appreciated.

Thanks!


 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 17 November 2010 11:06 PM
[ # 1 ]

Hey Commodore,

I just ran this test in Gmail and it looks great.  Have you made updates since posting to our forum? 

Nevertheless, you are doing the right thing by sticking with tables on this email layout.  If you want all of the images to match up nicely in Hotmail, you might want to add style=“display:block” to each of your images.  There is more on that subject here: Hotmail Image Spacing

Cheers!


 

commodorecrush

Newbie
Total Posts:  2
Posted: 17 November 2010 11:19 PM
[ # 2 ]

Hmmm.  Weird, well maybe it’s only a local issue on my computer that it looks strange.

Regarding the style=“display:block”, I just add that to the end of every inline style with an image?

Thanks so much for your help and thanks for a great site.  I’ll be sure to use it in the future too.


 

thumbslinger

Newbie
Total Posts:  11
Posted: 23 November 2010 03:28 PM
[ # 3 ]

Hi there… you need to put a DOCTYPE in your doc.

Photoshop doesn’t generate a DOCTYPE in the code it generates so some browsers will default and others won’t.

So, you need something like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
  “http://www.w3.org/TR/html4/loose.dtd”>

just before your opening html tag.

Of course, you can also use a STRICT type to negate quirks mode but your validation will show different results as to what you may need to fix.