www.webdeveloper.com
Results 1 to 3 of 3

Thread: CSS Problem in Email Browsers

  1. #1
    Join Date
    Mar 2005
    Posts
    88

    CSS Problem in Email Browsers

    I am working on a E-Newsletter and have changed the newsletter format from being built with tables to being CSS driven. For some reason when the newsletter is sent out the design is all messed up. Some email clients don't read it and convert it to text and others don't line up the columns correctly. Does anyone know if it is an issue with some missing code or if email clients just dont read the CSS? I know that not all clients are able to view HTML but I am using clients that can view HTML and it is still a problem. Thanks.

  2. #2
    Join Date
    Mar 2005
    Posts
    88
    HERE IS THE CSS

    Code:
    <style type="text/css">
     @import "all.css"; 
     
     body {
      margin:10px 10px 0px 10px;
      padding:0px;
      }
    
     
    #wrap {
    width:576px;
    position:relative;
    margin:auto;
    border: 2px solid;
    height: 1278px;
    }
    
    
     #leftcontent {
      position: absolute;
      left:0px;
      top:98px;
      height: 1178px;
      width:192px;
      background: url('http://www.campingfriend.com/images/eNewsletter_blue.gif');
      border:1px solid #000;
      }
     #centercontent {
      background:white;
      width: 190px;
      height: 1178px;
      border:1px solid;
      position: absolute;
      left: 193px;
      
      }
     
    
     #rightcontent {
      position: absolute;
      right:0px;
      top:98px;
      width:187px;
      background:url('http://www.campingfriend.com/images/eNewsletter_brown.gif');
      border:1px solid #000;
      height: 1178px;
      }
     
     #banner {
      background: white
      height: 98px;
      border-top:1px solid #000;
      border-right:1px solid #000;
      border-left:1px solid #000;
      voice-family: "\"}\"";
      voice-family: inherit;
      height:39px;
      align-text: center;
      }
     html>body #banner {
      height:39px;
      }
    
     #copy
    {
      width: 550px;
      bottom: 1100px;
      right: 225px;
    }   
        
     h1 {
      font-size:14px;
      padding-top:10px;
      }
      
     #banner h1 {
      font-size:26px;
      padding:10px 10px 0px 10px;
      margin:0px;
      text-align: center;
      font-family: Balloon Bd BT
      }
     
     
    ul.disc 
    {
    list-style-type: disc
    
    }
    ul.none
    {
    list-style-type: none;
    }
    a:active {  color: #006699}
    a:link {  color: #006699}
    a:visited {  color: #006699}
    a:hover {  color: #0000FF}
    
    p.margin {margin: 14px 16px 15px 16px}
    
    </style>

  3. #3
    Join Date
    Mar 2005
    Posts
    88
    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html><head><title>Summer 2005 TACO E-Newsletter</title>
    </head>
    <body>
    <div id="wrap">
    <div id="banner"><img src="http://www.campingfriend.com/images/eNewsletter_banner2.gif"></div>
    <div id="leftcontent">
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;"><left>Summer 2005</left><br><font color="#FFFFFF"><b>
    Order the 2005 Texas Saver Card now. Its FREE! Save up to 15% on your Camping Fees.</b>At participating parks in Texas & New Mexico. Pick-up
    the free card and Camping guide at any Texas Information Center (Point of Entry), member campground or at the web link below.</font></p>
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;"><font color="#FFFFFF"><b 
    <a href="http://www.campingfriend.com/TACO/default.asp?file=Portal_Consumer_Directory&state=TX" target="savercard">
    <img src="http://www.campingfriend.com/TACO/pictures/2005savercardsmall.jpg" width="102" height="75" border="0" alt="Click for discount camping with a Texas Saver Card!"></a><br>
    Texas Saver Card</b></font><br>
    <a href="http://www.campingfriend.com/TACO/default.asp?file=Portal_Consumer_Directory&state=TX" target="savercard"><font color="#FFFF00"><b>Click here</b></font></a> 
    <font color="#FFFFFF">for discount camping!</font></p>
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;"><font color="#FFFFFF"><b><font color="#CCCC99"><img src="http://www.campingfriend.com/images/eNewsletter_welcome.gif" width="159" height="24" alt="Welcome & Greeting"></font></b><br>
    Welcome to Texas. You will find the Lone Star State is a land of great diversity. From high plains to
    rugged mountains and from pine forests to beautiful, sunny beaches, there is something for everyone in
    Texas. Campgrounds & RV Resorts await you in towns small and large. </font></p>
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;"><a href="http://www.campingfriend.com/TACO/default.asp?file=Portal_Consumer_Directory&state=TX" target="_directory"><font color="#FFFF00">
    <img src="http://www.campingfriend.com/TACO/pictures/2005coversmall.jpg" width="126" height="162" alt="Order your Texas Campground Directory" border="0"><br>
    Order your FREE 2005 Texas Campground directory</font></a>
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;"><font color="#FFFFFF"><a href="http://www.campingfriend.com/TACO/default.asp?file=Portal_Consumer_Search_Criteria&state=NM&tabID=6776&linkID=590&sublinkID=288" target="_taco2">
    <img src="http://www.campingfriend.com/TACO/pictures/nm_postcard1.gif" width="120" height="100" border="0" alt="New Mexico"></a><br>
    "New Mexico"</font><br>
    <a href="http://www.campingfriend.com/TACO/default.asp?file=Portal_Consumer_Visitor_Info&state=NM&tabID=6776&linkID=630&sublinkID=302" target="_taco"><b><font color="#FFFF00">more info.></font></b></a>
    </div>
    <div id="centercontent">
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;"><a href="http://www.campingfriend.com/taco/member/featuredparks.htm" target="FeaturedParks"><img src="http://www.campingfriend.com/images/eNewsletter_FeaturedParks.gif" width="163" height="25" alt="Featured Parks" border="0"></a></p>
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;"> These outstanding parks invite you to see all the
    amazing amenities they have to offer. Visit their websites for seasonal specials and a terrific events calendar for their areas.
    <a href="http://www.campingfriend.com/taco/member/featuredparks.htm" target="FeaturedParks">more info.></a></p>
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;"><img src="http://www.campingfriend.com/images/rvpark4.jpg" width="156" height="120"></p>
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;"><b><img src="http://www.campingfriend.com/images/eNewsletter_Calendar.gif" width="163" height="26" alt="Calendar of Events"></b></p>
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;">Check these links for special events occurring all over Texas and New Mexico.<br><br>
    <a href="http://www.traveltex.com/EventsSearch.asp?SN=312134&LS=0" target="TXcalendar"><img src="http://www.campingfriend.com/images/eNewslatter_events_patch.gif" width="144" height="99" border="0" alt="Link to Texas events"></a></p>
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;"><a href="http://www.newmexico.org/calendar/eventview.cgi?_fn=Home" target="NMcalendar"><img src="http://www.campingfriend.com/images/eN_NMcalendar.gif" width="140" height="78" border="0" alt="New Mexico Calendar of Events"></a><br></p>
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;"><b><a href="http://www.campingfriend.com/TACO/default.asp?file=Portal_Consumer_Visitor_Info&state=NM&tabID=6776&linkID=630&sublinkID=302" target="newmexico">
    New Mexico</a> </b>- Where can you find breathtaking landscapes set against desert flora,
    moutain ranges with seemingly chiseled images and thick green forest? New Mexico - of course! 
    Just across the Texas border, you'll find inspirational scenery, 30 pound Stripe Bass, fabulous art galleries and rich Native American, Spanish 
    and Anglo heritage. Ski in the morning, play golf in the afternoon, satisfy your palate with a 
    unique blend of Indian and Mexican cuisine, then visit the local casinos for late night excitement.</p>
    </div>
    <div id="rightcontent">
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;"><a href="http://www.campingfriend.com/TACO/member/Featureddealers.htm" target="FeaturedDealers">
    <img src="http://www.campingfriend.com/images/eNewsletter_RV_Dealers.gif" width="158" height="22" alt="Featured RV Dealers" border="0"></a>
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;">What makes some dealers very special? Product, Service and Prices!! Check out our featured dealers for your
    next rig, to get a service question answered or to purchase supplies.    
    <a href="http://www.campingfriend.com/TACO/member/Featureddealers.htm" target="FeaturedDealers">more info.></a></p>
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;"><img src="http://www.campingfriend.com/images/genericrv-1.jpg" width="157" height="112"><br><br></p>
    <img src="http://www.campingfriend.com/images/eN_FeaturedRegions.gif" width="158" height="24" alt="Featured Region">
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;"><a href="http://texascampgrounds.com/default.asp?file=Portal_Consumer_Visitor_Info&state=TX&region=62&tabID=6776&linkID=628&sublinkID=294" target="northtexas"><b>
    North Texas</b></a> - From the prairies to the lakes to the Dallas/Fort Worth Metroplex, the options for funa nd entertainment are limitless. Major sports franchises, huge shopping malls, world famous bass fishing, the Stockyards and the beat goes on. Fairs, festivals, symphonies and museums mean you will find what you're looking for, whether it's a taste of the big city or a hankering for lakeside adventure."
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;"><a href="http://texascampgrounds.com/default.asp?file=Portal_Consumer_Visitor_Info&state=TX&region=62&tabID=6776&linkID=628&sublinkID=294" target="northtexas3"></p><p style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px; margin=0;"><center><img src="http://www.campingfriend.com/TACO/pictures/gallery_start_big.jpg" width="165" height="120" border="0" alt="North Texas"></center></a><br>
    <a href="http://texascampgrounds.com/default.asp?file=Portal_Consumer_Visitor_Info&state=TX&region=62&tabID=6776&linkID=628&sublinkID=294" target="northtexas2"><p style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px; margin=0;"><center><p style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px; margin=0;">North Texas</a>
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px; text-align: left;"><a href="http://texascampgrounds.com/default.asp?file=Portal_Consumer_Visitor_Info&state=TX&region=61&tabID=6776&linkID=628&sublinkID=294" target="westtexas"><b>
    West Texas</b></a> - The rugged grandeur of the Texas Plains allows vistors the best west way to understand the frontier and the people who settled it. You can enjoy fascinationg museums, journey vast expanses and see where the legendary "cowboy" took root in American history. Big Bend Country beckons adventure through the tallest region of Texas. The thorny, sunbleached and jagged terrain is anything but subtle. You can camp among scenic vistas, shoot challenging nature photography and explore the wilderness with sites that include the Great Comanche War Trail and the Rio Grande River.</p>                              
    <p class="margin" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;"><a href="http://texascampgrounds.com/default.asp?file=Portal_Consumer_Visitor_Info&state=TX&region=61&tabID=6776&linkID=628&sublinkID=294" target="westtexas2"></p><center><p style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px; margin=0;"><img src="http://www.campingfriend.com/TACO/pictures/paloduro_01.jpg" width="136" height="130" alt="West Texas" border="0"></a></center><br>
    <a href="http://texascampgrounds.com/default.asp?file=Portal_Consumer_Visitor_Info&state=TX&region=61&tabID=6776&linkID=628&sublinkID=294" target="westtexas3">West Texas</a>                
    </div>
    </div>
    </body></html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles