outlook moving my button styles to other elements.

Report · Feb 16, 2018

Hey everyone,

| am working on an email and I'm having the usual outlook headaches. Code renders pretty decent in other clients.

Here are my issues:

1) Background image is missing in Outlook (of course) . I tried bulletproof background images but it isn't working.

2) It seems my yellow background is taking on the style of my button and the button is loosing the style. (Should the button styles be in the head rather than inline?)

3) The logo at the bottom is taking on the button style in it's table and the button has lost the style.

I've attached two screenshots. One of it rendering correctly in certain clients and one showing the issues I'm having.

The html is below...

Thank you in advance for any advice.

<!DOCTYPE html>

<html>

<head>

<title>Premier Executive Review</title>

Advertising templates, free Newsletter" />

<style>

/*! CSS Used from: Embedded */

body{width:100%;background-color:#cccccc;margin:0;padding:0;-webkit-font-smoothing:antialiased;}

html{width:100%;}

table{font-size:14px;border:0;}

@media only screen and (max-width: 768px){

.container{width:650px;}

.container-middle{width:416px!important;}

}

@media only screen and (max-width: 622px){

.container{width:500px!important;}

.container-middle{width:416px!important;}

.mainContent{width:216px!important;}

}

@media only screen and (max-width: 480px){

.container{width:160px!important;}

}

@media only screen and (max-width: 479px){

.top-header-left{width:260px!important;text-align:center!important;}

.container{width:290px!important;}

.container-middle{width:260px!important;}

.mainContent{width:222px!important;}

table{width:100%!important;}

}

@media only screen and (max-width:320px){

.ban{background:url(file:///Volumes/Macintosh%20HD/Emails/Exec%20Communications/Executive%20Review%20Email/images/banner.jpg) no-repeat -260px 0px;background-size:cover;}

span.h-title{font-size:18px!important;line-height:1.8em!important;}

span.para{font-size:0.9em!important;line-height:1.8em;}

tr.ban{width:100%!important;height:256px!important;}

}

/*! CSS Used from: Embedded */

#footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;background-color:#666666;padding:30px 60px;}

@media screen and (max-width: 768px){

#footer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;}

}

.social_icons{display:-webkit-box;display:-ms-flexbox;display:flex;}

@media screen and (max-width: 768px){

.social_icons{margin:15px 0 0 0;}

}

.social_icons div{margin:0 0 0 5px;}

#logo{width:216px;height:46px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/logo_1.png);}

#twiterr_icon{width:35px;height:35px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/twiterr_icon.png);}

#linkedin_icon{width:35px;height:35px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/linkedin_icon.png);}

#insta_icon{width:35px;height:35px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/insta_icon.png);}

#youtube_icon{width:35px;height:35px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/youtube_icon.png);}

#fb_icon{width:35px;height:35px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/fb_icon.png);}</style>

</head>

<td>

<tr>

<tbody>

<tr>

<td>

<hr style="width:73%;"><td style="padding:0px 0;"><span class="h-title" style="color:#fff;font-family: 'Roboto Slab'; font-size:57px;font-weight:300;line-height:1em;text-align:center;text-decoration:none;">Executive Review </span><hr style="width:80%;margin-top:15px;"></td>

</tr>

<tr>

Insite. Spotlight. Engagement.

</span><hr style="width:80%;">

</td>

</tr>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

<td style="padding:10px 0;"><span class="h-title" style="color:#333333;font-family:Arial;font-size:30px;font-weight:600;line-height:1em;text-align:center;text-decoration:none;">Executive Leadership Track </span></td>

</tr>

<tr>

<b>Mike Alkire</b>, Premier’s Chief Operating Officer, discusses <br>

disruption in supply chain and what it means for you.

</span>

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<td>

<tr>

<tbody>

<tr>

<td>

<td style="padding:10px 0;"><span class="h-title" style="color:#333333;font-family:Arial;font-size:35px;font-weight:600;line-height:1em;text-align:center;text-decoration:none;">2018 Healthcare Trends </span></td>

</tr>

<tr>

Premier Chief Executive Officer and President, Susan Devore<br> breaks down what to expect in 2018, and how to prepare for what’s next.

</span>

</td>

</tr>

</table>

<a style="margin-top:25px;padding:5px 26px 5px 26px;background-color:#0091b3;border: 2px solid #ffffff;border-radius: 7px;line-height: 1.5;color:#ffc627;color:#ffffff;font-size:20px;text-decoration: none;font-family: 'Roboto Slab';font-weight:400;display: inline-block;text-align: center;" href="#">Learn More</a></div>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</table>

</td>

</tr><td bgcolor="666666"height="3"></td>

<tr>

<td style="padding:10px 0;"><span class="h-title" style="color:#333333;font-family:Arial;font-size:30px;font-weight:600;line-height:1em;text-align:center;text-decoration:none;">Executive Leadership Track </span></td>

</tr>

<tr>

Wednesday, June 20 and Thursday, June 21<br>Gaylord Opryland, Nashville, TN

</span>

</td>

</tr>

</table>

<a style="margin-top:25px;margin-bottom:45px;padding:5px 26px 5px 26px;background-color:#transparent;border: 2px solid #ffc627;border-radius: 7px;line-height: 1.5;color:#ffc627;color:#ffc627;font-size:20px;text-decoration: none;font-family: 'Roboto Slab';font-weight:400;display: inline-block;text-align: center;" href="#">Register Now</a></div>

</td>

</tr>

<tr>

</div>

</div>

</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

Report · Feb 16, 2018

Email clients do not have the full range of interpreters that web browsers have. As such, most do not recognise HTML5, an XHTML document is more suited, limited interpretations for CSS, stay with CSS 1, and cetainly no support for media queries, I think that GMail is an exception for media queries. In other words, scrap what you have done till now and start with humble table layouts.

A great starting point is the Starter Email Templates found in Dreamweaver, File -> New -> Starter Templates -> Email Templates.

Another great resource is https://foundation.zurb.com/emails/email-templates.html

For the rest, it is a matter of trial and error and heaps of Googling.

Wappler, the only real Dreamweaver alternative.

Report · Feb 19, 2018

Hi Ben,

Thanks for your advice. I have found a few template sites that have code that works ok. I've used foundation. problem is my company wants all our emails to mimic the landing pages I create making things hard. Probably going to suggest simplifying the email version a bit to get around the problematic code. After using bulletproof button code my buttons look fine.

We use Marketo. Even their built in templates have issues. Mine even render better than theirs in most cases through litmus. I guess it all comes down to do you want it fancy and work on 80% of email clients or close to 100% with something simple with no background images.

Thanks again

Adobe Community

outlook moving my button styles to other elements.

1 Correct answer