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>

2042 posts
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
  • Provided great feedback to improve the user experience on Envato Market
  • Interviewed on an Envato blog
+9 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.

214 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

2459 posts
  • Has been part of the Envato Community for over 5 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

2042 posts
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
  • Provided great feedback to improve the user experience on Envato Market
  • Interviewed on an Envato blog
+9 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