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

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

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

<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;}



<div class="wrapper">

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

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

    <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 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 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 class="gallery">
        <img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/pics.gif" width="571" />

    <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 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 class="contact_info">
        <img src="http://i1143.photobucket.com/albums/n636/Thomasdoelman/oyc/info.gif" />

    <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 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>




2227 posts
  • Achieved the monthly Community Superstar Award
  • Located in Europe
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
+11 more

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

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
revaxarts said
It’s all about the table! Forget floating divs!


2468 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
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

2227 posts
  • Achieved the monthly Community Superstar Award
  • Located in Europe
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
+11 more

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

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

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.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes