3 posts
  • Has been part of the Envato Community for over 3 years
Savil
says

Hello guys,

I have a question regarding a newsletter I’m making. (see below) So after creating a newsletter in photoshop I converted this in dreamweaver. I only used the slices I made in photoshop for the content basically since HTML is not really my thing.

With some help I managed to come this far and when I take a look at it on my web browser it looks fine however when I send it to gmail/hotmail or outlook it falls apart (only in the latest version of outlook it looks perfect somehow and in hotmail only the bar the bottom falls apart, gmail and an older version of outlook is a disaster tho)

So ye, I was wondering how I could prevent this… I took a look at other newsletters and they seem to work with tables alot but I have no idea how to implement this into mine.

Any help/suggestions is much appreciated!

ps: Its not completely finished yet as I still need to add some text but that on a sidenote.

- Savil


<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>OYC EUROPE</title>
</head>

<style type="text/css">

html, body { margin:0px; padding:0px; background:#EEEEEE;}
.wrapper { width:594px; margin:0px auto 0px auto; background:#2896F9;}

.header { }
.product { float:left; }
.menu { float:left; }
.links {float:right; }
.clear { clear:both; }

.thumbs, .gallery, .upcoming, .left { margin-left:13px; }
.upcoming, .thumbs, .gallery, .left, .right { margin-bottom:10px; }

.left { float:left; }

.right { float:right; margin-right:13px;}

.contact_info { margin-bottom:20px; }

.footer { background:url(http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/sm_bg2.png) no-repeat; width:587px; height:126px; margin-left:3px; }
.twitter {position:relative; top:36px; left:160px; overflow:hidden; }
.facebook { position:relative; top:-49px; left:228px; overflow:hidden; }
.linkedin { position:relative; top:-107px; left:298px; overflow:hidden; }
.logo { float:right; position:relative; top:-196px;}

.unsub, .unsub a {color:#FFF; text-align:center;}
.unsub a:hover {color:#fff;}

</style>

<body>

<div class="wrapper">

    <div class="header">
        <img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/oycheader.gif" alt="OYC EUROPE" />
    </div>

    <div class="product">
        <img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/bannerpic.gif" alt="OYC EUROPE" />
    </div>

    <div class="links">
        <a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/quicklinks.gif" /></a><br />
        <a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/partnerlinks.jpg" /></a><br />
        <a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/contact.gif" /></a><br />
        <a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/careers.gif" /></a><br />
        <a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/worldwide.gif" /></a><br />
        <a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/news.gif" /></a><br />
        <a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/events.gif" /></a><br />
        <a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/productcatalogue.jpg" /></a><br />
       <a href="http://www.docterbob.net/"> <img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/quicklinksunder.gif" /></a><br />
    </div>

    <div class="menu">
        <a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/home.gif" alt="home" /></a><!--
        --><a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/products.gif" alt="products" /></a><!--
        --><a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/services.gif" alt="services" /></a><!--
        --><a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/training.gif" alt="training" /></a><!--
        --><a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/tech-support.gif" alt="techsupport" /></a><!--
        --><a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/aboutus.gif" alt="aboutus" /></a>
    </div>

    <div class="clear"></div>
    <br />

    <div class="upcoming"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/upcomingeventsbar.jpg" alt="upcoming" /></div>

    <div class="thumbs">
        <a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/ue1.gif" /></a><!--
        --><a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/ue2.gif" /></a><!--
        --><a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/ue3.gif" /></a><!--
        --><a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/ue4.gif" /></a><!--
        --><a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/ue5.gif" /></a>
    </div>

    <div class="gallery">
        <img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/pics.gif" width="571" />
    </div>

    <div class="left">
        <img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/latestnewsbar.jpg" alt="latest" /><br />
        <a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/latestnews1.gif" alt="item" /></a><br /><a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/latestnews2.gif" alt="item" /></a><br /><a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/latestnews3.gif" alt="item" /></a><br /><a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/latestnews4.gif" alt="item" /></a><br />
    </div>

    <div class="right">
        <img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/updatebar.jpg" alt="updates" /><br />
        <a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/updates1.gif" alt="item" /></a><br />
        <a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/updates2.gif" alt="item" /></a><br />
        <a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/updates3.gif" alt="item" /></a><br />
        <a href="http://www.docterbob.net/"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/updates4.gif" alt="item" /></a><br />
    </div>

    <div class="contact_info">
        <img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/info.gif" />
    </div>

    <div class="footer">
        <div class="twitter"><a href="http://twitter.com/#!/RBleek"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/socialmediatwitter.gif" /></a><br /><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc_newsletter_2011_53.gif" /></div>
        <div class="facebook"><a href="http://twitter.com/#!/RBleek"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/socialmediafacebook.gif" /></a></div>
        <div class="linkedin"><a href="http://twitter.com/#!/RBleek"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/socialmedialinkedin.gif" /></a></div>
        <div class="logo"><a href="http://docterbob.net"><img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/socialmedia4.gif" /></a></div>
    </div>
    <div class="unsub">
    <p style="font-size: 11px; color:#000; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">Having trouble reading this? <webversion style="color: #FFF; text-decoration: none;">View it in your browser</webversion>. Not interested? <unsubscribe style="color: #FFF; text-decoration: none; "> </unsubscribe><a href="http://twitter.com/#!/RBleek">Unsubscribe </a></p>

    </div>

</div>

</body>

2276 posts
  • Became a Top 20 Author of the Month
  • Had an item that became a weekly top seller
  • Created a helpful tool/app using the Envato API
  • Created a helpful tool/app for Envato Market users
+15 more
revaxarts
says

If you make newsletter you must have the “skills” from the 90’s!

It’s all about the table! Forget floating divs!

3 posts
  • Has been part of the Envato Community for over 3 years
Savil
says

hehe thanks for the tip. But since I use mostly images its rather hard for me to pull it off. Then again, I guess thats the only way to do it properly without worrying that it completely messes up.

223 posts
  • Has referred 1+ members
  • Has collected 50+ items on Envato Market
  • Has been part of the Envato Community for over 6 years
  • Sells items exclusively on Envato Market
agusmu
says
revaxarts said
It’s all about the table! Forget floating divs!

+1

2468 posts
  • Has been part of the Envato Community for over 6 years
  • Has sold $100+ on Envato Market
  • Has referred 100+ members
  • Has been a beta tester for an Envato feature
+3 more
digitalimpact
says
Savil said
hehe thanks for the tip. But since I use mostly images its rather hard for me to pull it off. Then again, I guess thats the only way to do it properly without worrying that it completely messes up.

Indeed, it is the ONLY way. Tables, inline styles, no floats, no paddings, no fancy CSS (only basic).

If it’s mostly images, simply create tables and put those sliced images in your <td />’s.

And don’t forget to have fun :) :P

2276 posts
  • Became a Top 20 Author of the Month
  • Had an item that became a weekly top seller
  • Created a helpful tool/app using the Envato API
  • Created a helpful tool/app for Envato Market users
+15 more
revaxarts
says

Check out this resource too: http://www.campaignmonitor.com/css/

3 posts
  • Has been part of the Envato Community for over 3 years
Savil
says

Alright thanks for all the advice guys! (:

Will try to put everything into tables. One more question though, If I want to make tables, do they all have to be the same width? I recall reading somewhere if they aren’ t the same width it will mess up but i’m not sure.

by
by
by
by
by
by