API tools faq
paste
Advertisement
c-m

gmail problem

c-m
Feb 4th, 2013
89
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.26 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  6. <title>TMN</title>
  7. <style type="text/css">
  8. /* Based on The MailChimp Reset INLINE: Yes. */
  9. /* Client-specific Styles */
  10. #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
  11. body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; background: #eeeeee;}
  12. /* Prevent Webkit and Windows Mobile platforms from changing default font sizes.*/
  13. .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
  14. .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
  15. /* Forces Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
  16. #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
  17. /* End reset */
  18.  
  19. /* Some sensible defaults for images
  20. Bring inline: Yes. */
  21. img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
  22. a img {border:none;}
  23. .image_fix {display:block;}
  24.  
  25. /* Yahoo paragraph fix
  26. Bring inline: Yes. */
  27. p {margin: 1em 0;}
  28.  
  29. /* Hotmail header color reset
  30. Bring inline: Yes. */
  31. h1, h2, h3, h4, h5, h6 {color: black !important;}
  32.  
  33. h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: blue !important;}
  34.  
  35. h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
  36. color: red !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
  37. }
  38.  
  39. h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
  40. color: purple !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
  41. }
  42.  
  43. /* Outlook 07, 10 Padding issue fix
  44. Bring inline: No.*/
  45. table td {border-collapse: collapse;}
  46.  
  47. /* Remove spacing around Outlook 07, 10 tables
  48. Bring inline: Yes */
  49. table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  50.  
  51. /* Styling your links has become much simpler with the new Yahoo. In fact, it falls in line with the main credo of styling in email and make sure to bring your styles inline. Your link colors will be uniform across clients when brought inline.
  52. Bring inline: Yes. */
  53. a {color: #4e94d1; text-decoration:none; font-family:Arial, Helvetica, sans-serif;}
  54. a:hover {text-decoration:underline;}
  55.  
  56. /***************************************************
  57. ****************************************************
  58. MOBILE TARGETING
  59. ****************************************************
  60. ***************************************************/
  61. @media only screen and (max-device-width: 480px) {
  62. /* Part one of controlling phone number linking for mobile. */
  63. a[href^="tel"], a[href^="sms"] {
  64. text-decoration: none;
  65. color: blue; /* or whatever your want */
  66. pointer-events: none;
  67. cursor: default;
  68. }
  69.  
  70. .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
  71. text-decoration: default;
  72. color: #4e94d1 !important;
  73. pointer-events: auto;
  74. cursor: default;
  75. }
  76.  
  77. }
  78.  
  79. /* More Specific Targeting */
  80.  
  81. @media only screen and (max-device-width: 768px) and (max-device-width: 480px) {
  82. /* You guessed it, ipad (tablets, smaller screens, etc) */
  83. /* repeating for the ipad */
  84. a[href^="tel"], a[href^="sms"] {
  85. text-decoration: none;
  86. color: blue; /* or whatever your want */
  87. pointer-events: none;
  88. cursor: default;
  89. }
  90.  
  91. .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
  92. text-decoration: default;
  93. color: #4e94d1 !important;
  94. pointer-events: auto;
  95. cursor: default;
  96. }
  97. }
  98.  
  99. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  100. /* Put your iPhone 4g styles in here */
  101. }
  102.  
  103. /* Android targeting */
  104. @media only screen and (-webkit-device-pixel-ratio:.75){
  105. /* Put CSS for low density (ldpi) Android layouts in here */
  106. }
  107. @media only screen and (-webkit-device-pixel-ratio:1){
  108. /* Put CSS for medium density (mdpi) Android layouts in here */
  109. }
  110. @media only screen and (-webkit-device-pixel-ratio:1.5){
  111. /* Put CSS for high density (hdpi) Android layouts in here */
  112. }
  113. /* end Android targeting */
  114.  
  115.  
  116.  
  117.  
  118.  
  119. /* TMN mobile-specific CSS styles go here */
  120. @media only screen and (max-width: 800px) {
  121. div, p, a, li, td {
  122. -webkit-text-size-adjust:none;
  123. }
  124.  
  125.  
  126.  
  127.  
  128.  
  129. td[class="mainColumn"] {
  130. width: 350px !important;
  131. }
  132.  
  133. table .hide, img .hide, td .hide {
  134. display: none !important;
  135. }
  136.  
  137. td[id="internalContainer"] {
  138. width: 350px; !important;
  139. }
  140.  
  141. td[id="emailHeader"] {
  142. width: 350px !important;
  143. background-color: #3c94d3 !important;
  144. background: url(mobileheader.jpg) no-repeat;
  145. height: 100px;
  146. }
  147.  
  148. table [id="socialMobile"] {
  149. display: block;
  150. padding-right: 5px;
  151. padding-top: 20px;
  152. }
  153.  
  154. td [id="leftColumn"] {
  155. width: 350px !important;
  156. }
  157.  
  158. td .itemLink {
  159. text-align: left;
  160. }
  161.  
  162. td #footer {
  163. width: 350px !important;
  164. text-align: left !important;
  165. padding: 10px;
  166.  
  167. }
  168.  
  169. td .sectionHeader {
  170. background: url(drivingandtransport.jpg) no-repeat;
  171. background-position: -60px;
  172. height: 55px;
  173. }
  174.  
  175. td .sectionHeader img {
  176. display: none !important;
  177. }
  178.  
  179. }
  180.  
  181.  
  182.  
  183.  
  184. /******* Main TMN Styles *******/
  185.  
  186.  
  187.  
  188. td #emailInfo {
  189. text-align: center;
  190. background-color: #3c94d3;
  191. color: #222222;
  192. }
  193.  
  194.  
  195. td #emailHeader {
  196. border: 0;
  197. width: 600px;
  198. height: 100px;
  199. margin: 0;
  200. padding: 0;
  201. background-color: #eeeeee;
  202.  
  203. }
  204.  
  205.  
  206. table #socialMobile {
  207. display: none;
  208. }
  209.  
  210. table #hero {
  211. background-color: #3c94d3;
  212. color: #ffffff;
  213. width: 100%;
  214.  
  215. }
  216.  
  217. table #hero h2 {
  218. color: #ffffff !important;
  219. font-family: Arial, Arial, Helvetica, sans-serif sans-serif;
  220. font-size: 1.05em;
  221. font-weight: 600;
  222. margin: 0;
  223. }
  224.  
  225. table #hero h3 {
  226. color: #162246 !important;
  227. font-family: Arial, Arial, Helvetica, sans-serif sans-serif;
  228. font-weight: 300;
  229. font-size: 15px;
  230. margin-top: 0;
  231. padding-top: 0;
  232. }
  233.  
  234. table #hero h3 a {
  235. color: #162246 !important;
  236. font-family: Arial, Arial, Helvetica, sans-serif sans-serif;
  237. font-weight: 300;
  238. font-size: 15px;
  239. margin-top: 0;
  240. padding-top: 0;
  241. text-decoration: none;
  242. }
  243.  
  244. table #hero p {
  245. color: #ffffff;
  246. font-family: Arial, Arial, Helvetica, sans-serif sans-serif;
  247. font-weight: 300;
  248. font-size: 13px;
  249. margin-top: 0;
  250. padding-top: 0;
  251. text-decoration: none;
  252. }
  253.  
  254. table #hero h3 a:hover {
  255. text-decoration: underline;
  256. }
  257.  
  258. td #footer {
  259. text-align: center;
  260. background-color: #3c94d3;
  261. }
  262.  
  263. td #footer p {
  264. color: #ffffff;
  265. font-size: 0.55em;
  266. font-family:Arial, Helvetica, sans-serif;
  267.  
  268. }
  269.  
  270. td .bestsellers h2 {
  271. color: #3d94d3 !important;
  272. font-family: Arial, Arial, Helvetica, sans-serif sans-serif;
  273. font-weight: 300;
  274. font-size: 1.05em;
  275. margin-top: 0;
  276. padding-top: 0;
  277. }
  278.  
  279. td .number {
  280. font-size: 36px;
  281. font-weight: 700;
  282. color: #162246;
  283. font-family: Arial, Arial, Helvetica, sans-serif sans-serif;
  284. }
  285.  
  286. td .bestsellersTitle {
  287. font-size: 13px;
  288.  
  289. }
  290.  
  291. td .howtoorder h2 {
  292. color: #3d94d3 !important;
  293. font-family: Arial, Arial, Helvetica, sans-serif sans-serif;
  294. font-weight: 500;
  295. font-size: 1.05em;
  296. margin: 0;
  297. margin-bottom: 5px;
  298. padding-top: 0;
  299. }
  300.  
  301. td .howtoorder h3 {
  302. color: #4e94d1 !important;
  303. font-family: Arial, Arial, Helvetica, sans-serif sans-serif;
  304. font-weight: 300;
  305. font-size: 13px;
  306. margin-top: 0;
  307. margin-bottom: 0;
  308. padding-top: 0;
  309. }
  310.  
  311. td .howtoorder p {
  312. color: #999999 !important;
  313. font-family: Arial, Arial, Helvetica, sans-serif sans-serif;
  314. font-weight: 300;
  315. font-size: 13px;
  316. margin: 0px;
  317. padding-top: 0;
  318. }
  319.  
  320. td .howtoorder a {
  321. color: #162246;
  322. }
  323.  
  324. td .usefulInfo p {
  325. font-family: Arial, Arial, Helvetica, sans-serif sans-serif;
  326. font-size: 0.75em;
  327. }
  328.  
  329. td .usefulInfo h2 {
  330. color: #162246 !important;
  331. font-family: Arial, Arial, Helvetica, sans-serif sans-serif;
  332. font-size: 16px;
  333. font-weight: 400;
  334. margin: 0;
  335. padding: 0;
  336. }
  337.  
  338. td .usefulInfo a {
  339. color: #4e94d1 !important;
  340. }
  341.  
  342.  
  343. td .itemTitle {
  344. color: #3d94d3;
  345. font-size: 1.3em;
  346. font-weight: lighter;
  347.  
  348.  
  349. }
  350.  
  351. td .itemLink a {
  352. background-color: #3c94d3;
  353. color: #ffffff !important;
  354. padding: 10px;
  355. border: 1px solid #162246;
  356. font-size: 13px;
  357. }
  358.  
  359. td .itemDetails p {
  360. font-family: Arial, Arial, Helvetica, sans-serif sans-serif;
  361. font-size: 0.75em;
  362. }
  363.  
  364. td .itemCopy p {
  365. font-family: Arial, Arial, Helvetica, sans-serif sans-serif;
  366. font-size: 0.75em;
  367.  
  368. }
  369.  
  370. img {
  371. display: block;
  372. }
  373.  
  374. </style>
  375.  
  376. <!-- Targeting Windows Mobile -->
  377. <!--[if IEMobile 7]>
  378. <style type="text/css">
  379.  
  380. </style>
  381. <![endif]-->
  382.  
  383. <!-- ***********************************************
  384. ****************************************************
  385. END MOBILE TARGETING
  386. ****************************************************
  387. ************************************************ -->
  388.  
  389. <!--[if gte mso 9]>
  390. <style>
  391. /* Target Outlook 2007 and 2010 */
  392. </style>
  393. <![endif]-->
  394. </head>
  395. <body>
  396. <!-- Wrapper/Container Table: Use a wrapper table to control the width and the background color consistently of your email. Use this approach instead of setting attributes on the body tag. -->
  397. <table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
  398. <tr>
  399. <td valign="top">
  400. <!-- Tables are the most common way to format your email consistently. Set your table widths inside cells and in most cases reset cellpadding, cellspacing, and border to zero. Use nested tables as a way to space effectively in your message. -->
  401. <table cellpadding="0" cellspacing="0" border="0" align="center" class="mainContainer">
  402.  
  403.  
  404.  
  405. <tr>
  406. <td valign="top"></td>
  407. <!--main content -->
  408. <td valign="top" class="mainColumn">
  409. <table cellpadding="0" cellspacing="0" class="mainContent" valign="top" >
  410.  
  411.  
  412. <tr>
  413.  
  414. <td width="600" valign="top" class="hide" id="emailInfo" >Email infomation</td>
  415.  
  416. </tr>
  417.  
  418. <tr>
  419.  
  420. <td width="600" valign="top" id="emailHeader"><img src="header.jpg" width="600" height="121" alt="TSO logo" class="TSOmain hide" style="display: block;" /><table id="socialMobile" cellpadding="6" cellspacing="0" align="right" height="90"><tr valign="middle"><td><img src="images/facebookm.jpg" /></td><td><img src="images/twitterm.jpg" width="35" height="36" alt="twitter" /></td><td><img src="images/plusm.jpg" width="35" height="35" alt="google plus" /></td></tr></table></td>
  421.  
  422. </tr>
  423.  
  424.  
  425. <tr>
  426. <td bgcolor="#FFFFFF" width="600" id="internalContainer">
  427. <!-- right column -->
  428. <table class="hide" id="rightColumn" align="right" cellpadding="10" cellspacing="0">
  429. <tr>
  430. <td width="100">
  431.  
  432. <!-- best sellers table --> <table cellpadding="5" cellspacing="0" border="1" bordercolor="#162246">
  433. <tr>
  434. <td class="bestsellers" width="130">
  435. <h2>TSO bestsellers</h2>
  436. <table cellpadding="10" cellspacing="0">
  437. <tr>
  438. <td class="number">1</td><td class="bestsellersTitle" valign="top"><a href="#" >Book title </a> </td>
  439. </tr>
  440. <tr>
  441. <td class="number">2</td><td class="bestsellersTitle" valign="top"><a href="#" >Book title </a> </td>
  442. </tr>
  443. <tr>
  444. <td class="number">3</td><td class="bestsellersTitle" valign="top"><a href="#" >Book title </a> </td>
  445. </tr>
  446. <tr>
  447. <td class="number">4</td><td class="bestsellersTitle" valign="top"><a href="#" >Book title </a> </td>
  448. </tr>
  449. <tr>
  450. <td class="number">5</td><td class="bestsellersTitle" valign="top"><a href="#" >Book title </a> </td>
  451. </tr>
  452.  
  453. </table>
  454. </td>
  455. </tr>
  456. </table><!-- end best sellers table -->
  457. </td>
  458. </tr>
  459.  
  460.  
  461. <tr>
  462. <td width="130">
  463.  
  464. <!-- how to order table --> <table cellpadding="0" cellspacing="0">
  465. <tr>
  466. <td class="howtoorder" width="130">
  467. <h2>How to order</h2>
  468. <table cellpadding="5" cellspacing="0">
  469. <tr>
  470. <td class="number"><img src="hto1.jpg" width="31" height="29" alt="laptop image" style="display: block;" /></td><td class="bestsellersTitle" valign="top"><h3>Online</h3><p>Simply visit <a href="http://www.tsoshop.co.uk">tsoshop.co.uk</a></p></td>
  471. </tr>
  472. <tr>
  473. <td class="number"><img src="hto2.jpg" width="30" height="29" alt="email icon" style="display: block;" /></td><td class="bestsellersTitle" valign="top"><h3>Email</h3><a href="mailto:sales@tso.co.uk" >sales@tso.co.uk</a> </td>
  474. </tr>
  475. <tr>
  476. <td class="number"><img src="hto3.jpg" width="30" height="22" alt="post icon" style="display: block;" /></td><td class="bestsellersTitle" valign="top"><h3>Post</h3><p>Print off an order form</p> </td>
  477. </tr>
  478. <tr>
  479. <td class="number"><img src="hto4.jpg" width="30" height="34" alt="phone icon" style="display: block;" /></td><td class="bestsellersTitle" valign="top"><h3>Phone</h3><p>+44 (0)870 243 0123</p></td>
  480. </tr>
  481. <tr>
  482. <td class="number"><img src="hto6.jpg" width="31" height="30" alt="fax icon" style="display: block;" /></td><td class="bestsellersTitle" valign="top"><h3>Fax</h3><p>+44 (0)870 243 0129</p></td>
  483. </tr>
  484.  
  485. </table>
  486. </td>
  487. </tr>
  488. </table><!-- end how to order table -->
  489. </td>
  490. </tr>
  491.  
  492.  
  493. </table>
  494. <!-- end right column -->
  495.  
  496.  
  497.  
  498. <!-- left column -->
  499. <table id="leftColumn" align="left" cellpadding="10" cellspacing="0" >
  500. <tr>
  501. <td width="380">
  502. <table id="hero" cellpadding="10" cellspacing="0">
  503. <tr>
  504. <td colspan="2"><h2>TSO titles coming soon</h2></td>
  505. </tr>
  506. <tr>
  507. <td width="100"><img src="placeholder.jpg" width="100" height="150" style="display: block;" /></td>
  508. <td valign="top"><h3><a href="#">This is a book Title and also a link</a></h3>
  509. <p>And this is some funky blurb about the book that's going to encourage purchases like never before.</p></td>
  510.  
  511. </tr>
  512. </table><!-- end hero colummn -->
  513. </td>
  514. </tr>
  515.  
  516. <tr>
  517. <td with="380">
  518. <table class="usefulInfo" cellpadding="10" cellspacing="0">
  519. <tr>
  520.  
  521. <td valign="top"><h2><a href="#">Important information here - It can be a link or not that's up to you</a></h2>
  522. <p>You can use this section to highlight some important information such as event dates, iTSO, or anything else.</p></td><td width="140"><img src="itsoscreen.jpg" width="140" height="152" style="display: block;"/></td>
  523.  
  524. </tr>
  525. </table><!-- end hero colummn -->
  526. </td>
  527. </tr>
  528.  
  529.  
  530. <tr>
  531. <td with="380">
  532. <table class="section" cellpadding="5" cellspacing="0">
  533. <tr>
  534.  
  535. <td valign="top" class="sectionHeader"><a href="#"> <img src="drivingandtransport.jpg" width="300" height="60" alt="driving and transport" style="display: block;"/> </a></td>
  536. </tr>
  537. <tr>
  538. <td>
  539. <table class="itemcontentOuter" cellpadding="0" cellspacing="0">
  540. <tr>
  541. <td class="itemImage" valign="top">
  542. <img src="placeholder.jpg" width="100" height="150" hspace="10" style="display: block;" />
  543. </td>
  544.  
  545. <td>
  546. <table class="itemInner" cellpadding="0" cellspacing="0">
  547. <tr>
  548. <td class="itemTitle" valign="top" colspan="2"><a href="#">This is the title of the book</a> </td>
  549. </tr>
  550. <tr>
  551. <td class="itemCopy" valign="top" colspan="2"><p>Here you can write all the exciting information you want about the item. Yipee.</p></td>
  552. </tr>
  553. <tr>
  554. <td>
  555. <table cellpadding="0" cellspacing="0" align="left"> <tr> <td class="itemDetails" valign="top"><p>Published: 00 Month 2013<br />
  556. ISBN:0000000000000<br />
  557. Price: £00.00<br /></p></td></tr>
  558. </table>
  559. <table cellpadding="0" cellspacing="0" align="right">
  560. <tr>
  561.  
  562. <td class="itemLink" valign="middle" align="right"><p><a href="#" >Buy now</a></p>
  563. </td>
  564. </tr>
  565. </table>
  566.  
  567. </td>
  568. </tr>
  569. </table>
  570. </td>
  571.  
  572. <tr>
  573. </table><!-- end item conent outer-->
  574. </td>
  575.  
  576. </tr>
  577. </table><!-- end section colummn -->
  578.  
  579.  
  580.  
  581. <!-- business it and finance
  582. <table class="section" cellpadding="0" cellspacing="0">
  583. <tr>
  584.  
  585. <td valign="top" class="sectionHeader businessITfinance"><a href="#"> <img src="images/business.jpg" width="380" height="68" alt="driving and transport" style="display: block;"/> </a></td>
  586. </tr>
  587. <tr>
  588. <td>
  589. [!content!]
  590. </td>
  591.  
  592. </tr>
  593. </table>
  594.  
  595. <!-- end business it and finance -->
  596.  
  597. <!-- Investors in people
  598.  
  599. <table class="section" cellpadding="0" cellspacing="0">
  600. <tr>
  601.  
  602. <td valign="top" class="sectionHeader businessITfinance"><a href="#"> <img src="images/iip.jpg" width="380" height="52" alt="driving and transport" style="display: block;" /> </a></td>
  603. </tr>
  604. <tr>
  605. <td>
  606. [!content!]
  607. </td>
  608.  
  609. </tr>
  610. </table>
  611.  
  612. <!-- end business it and finance -->
  613.  
  614.  
  615. </td>
  616. </tr>
  617.  
  618.  
  619.  
  620.  
  621.  
  622.  
  623.  
  624.  
  625.  
  626.  
  627.  
  628. </table><!-- end left column -->
  629.  
  630.  
  631. </td>
  632. </tr>
  633.  
  634.  
  635. <tr>
  636.  
  637.  
  638. <td width="600" valign="top" id="footer">
  639. <p>This email as been sent to [!EmailAddress!] by TSO.<br/>If you no longer wish to receive these emails please [!Unsubscribe!].
  640. <p>Registered office: 1-5 Poland Street, London, W1F 8PR.<br/>Part of the Williams Lea Group</p>
  641. <p>The marketing of products published by TSO is funded by TSO. www.tso.co.uk</p></td>
  642.  
  643. </tr>
  644.  
  645.  
  646. </table>
  647. </td>
  648. <!-- end main content -->
  649. <td valign="top"></td>
  650. </tr>
  651.  
  652.  
  653.  
  654.  
  655.  
  656.  
  657.  
  658.  
  659.  
  660.  
  661.  
  662.  
  663. </table>
  664. <!-- End main table -->
  665.  
  666.  
  667.  
  668.  
  669.  
  670.  
  671. <!-- Gmail/Hotmail image display fix -->
  672. <img class="image_fix" src="full path to image" alt="Your alt text" title="Your title text" width="x" height="x" />
  673.  
  674. <!-- Working with telephone numbers (including sms prompts). Use the "mobile" class to style appropriately in desktop clients
  675. versus mobile clients. -->
  676. <span class="mobile_link">123-456-7890</span>
  677.  
  678. </td>
  679. </tr>
  680. </table> <!-- enf body table -->
  681. <!-- End of wrapper table -->
  682. </body>
  683. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!