ugrás a tartalomhoz

E-mail template nem úgy jelenik meg ahogy kellene

lamase · 2010. Jún. 22. (K), 12.58
Sziasztok!

Probléma a következő, html levelet szeretnék kiküldeni, a kód itt lejebb:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>STAT PADS NEWSLETTER</title>
<style type="text/css">
#body {
	background-color:#add3e5;
	color:#757575;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	margin:0;
	padding:0;
}

#tablebg {
	background-image:url(background.jpg);
	background-repeat:repeat-y;
	width:911px;
	overflow:hidden;
	margin:40px auto 0 auto;
}

#table .line td {
	padding:0 25px 0 25px;
}

.box {
	width:811px;
	border-left:1px solid #d0d0d0;
	border-right:1px solid #d0d0d0;
	padding:0 25px 0 25px;
	overflow:hidden;
	float:left;
}

.box h1 {
	font-size:36px;
	margin:0;
	padding:0;
	font-weight:normal;
	color:#21548e;
}

.box h2 {
	font-size:14px;
	font-weight:bold;
	margin:0;
	padding:0;
	color:#c41331;
}

.box h3 {
	font-size:36px;
	font-weight:normal;
	margin:0;
	padding:0;
	color:#c41331;
}

.box img {
	margin:0 15px 0 0;
}

hr {
	background-color:#c5c5c5;
	height:1px;
	margin:30px 0;
	border:0;
}
</style>
</head>

<body id="body">
	<div id="tablebg">
       <table width="911" border="0" cellpadding="0" cellspacing="0" id="table">
      <tr>
        <td><img src="top.jpg" width="911" height="13" alt="" /></td>
      </tr>
      <tr class="line">
        <td><a href="/"><img src="statpads.jpg" alt="" width="276" height="107" border="0" /></a></td>
      </tr>
      <tr class="line">
        <td>&nbsp;</td>
      </tr>
      <tr class="line">
        <td><img src="boxTop.jpg" width="863" height="16" alt="" /></td>
      </tr>
      <tr class="line">
        <td>
            <div class="box">
                <h1>Header - Lorem Ipsum Dolor Sit</h1>
            </div>
        </td>
      </tr>
      <tr class="line">
        <td><img src="boxBottom.jpg" width="863" height="23" alt="" /></td>
      </tr>
      <tr class="line">
        <td>&nbsp;</td>
      </tr>
      <tr class="line">
        <td><img src="boxTop.jpg" width="863" height="16" alt="" /></td>
      </tr>
      <tr class="line">
        <td>
            <div class="box">
                <img src="sampleImage01.jpg" alt="" width="189" height="130" align="left" />
                <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lorem nisi.</h2>
                Fusce tristique rhoncus laoreet. Aenean sit amet fringilla mauris. Vivamus a turpis id sem scelerisque laoreet ut quis dui.
                <br /><br />
                <strong>Vestibulum id consequat urna. Mauris a placerat odio. </strong>
                Duis in enim nisi. Vivamus ac egestas lorem. Aenean feugiat nibh vitae est convallis tristique. Vivamus lectus diam, dictum a rhoncus eu, consectetur id orci. Nunc sapien dui, dignissim hen dignissim hendrerit convallis in, placerat eget leo. Duis in enim nisi. Vivamus ac egestas lorem. Aenean feugiat nibh vitae est convallis tristique. Suspendisse sagittis risus suscipit nisi vehicula ut pellentesque tellus vestibulum. Phasellus mollis adipiscing massa, in dapibus dui viverra lacinia. Suspendisse potenti. Etiam gravida mi a metus dapibus sagittis. Nulla lobortis sem at nisl vulputate gravida. Suspendisse potenti. Etiam gravida mi a metus dapibus sagittis. Nulla lobortis sem at nisl vulputate gravida.
                <hr />
                <img src="sampleImage02.jpg" alt="" width="189" height="130" align="left" />
                <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lorem nisi.</h2>
                Fusce tristique rhoncus laoreet. Aenean sit amet fringilla mauris. Vivamus a turpis id sem scelerisque laoreet ut quis dui.
                <br /><br />
                <strong>Vestibulum id consequat urna. Mauris a placerat odio. </strong>
                Duis in enim nisi. Vivamus ac egestas lorem. Aenean feugiat nibh vitae est convallis tristique. Vivamus lectus diam, dictum a rhoncus eu, consectetur id orci. Nunc sapien dui, dignissim hen dignissim hendrerit convallis in, placerat eget leo. Duis in enim nisi. Vivamus ac egestas lorem. Aenean feugiat nibh vitae est convallis tristique. Suspendisse sagittis risus suscipit nisi vehicula ut pellentesque tellus vestibulum. Phasellus mollis adipiscing massa, in dapibus dui viverra lacinia. Suspendisse potenti. Etiam gravida mi a metus dapibus sagittis. Nulla lobortis sem at nisl vulputate gravida. Suspendisse potenti. Etiam gravida mi a metus dapibus sagittis. Nulla lobortis sem at nisl vulputate gravida.
          </div>
        </td>
      </tr>
      <tr class="line">
        <td><img src="boxBottom.jpg" width="863" height="23" alt="" /></td>
      </tr>
      <tr class="line">
        <td>&nbsp;</td>
      </tr>
      <tr class="line">
        <td><img src="boxTop.jpg" width="863" height="16" alt="" /></td>
      </tr>
      <tr class="line">
        <td align="center">
            <div class="box">
                <h3>Footer</h3>
            </div>
        </td>
      </tr>
      <tr class="line">
        <td><img src="boxBottom.jpg" width="863" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="bottom.jpg" width="911" height="13" alt="" /></td>
      </tr>
    </table>
</div>

</body>
</html>
Lehet hülyeség hogy nem külön fájból olvasom be a css-t? mintha valahol így láttam volna. A probéma, hogy a G-mail levelezőben ezt az eredményt kapom míg freemailben normálisan megjelenik

Mit rontottam el, hol a probléma? Azt én is látom, hogy valamiért #tablebg nem látszik, aminek a háttér van megadva. Köszönöm a segítséget!
‹ chat jelzőhanggal jQuery pls help :) ›
 ■
1

probléma megoldva?

lamase · 2010. Jún. 22. (K), 13.18
Módosítottam pár dolgot rajta, így hirtelen nemtudom mitől javult meg, de lehet, hogy a background="images/background.jpg" miatt lett hirtelen jó, amit a table-nek állítottam be.
2

úgy néz ki outlookban nem jó

lamase · 2010. Jún. 22. (K), 13.23
úgy néz ki outlookban nem jó
3

táblázat

ironwill · 2010. Jún. 22. (K), 17.17
Szia!

Sajnos személyes tapasztalat nincs, de úgy tudom, hogy a hírleveleket táblázatokból szokták építeni pontosan emiatt.
Próbáld meg leegyszerűsíteni az oldalt amennyire csak lehet. Hagyd ki belőle a speciális igazításokat pl. float.

üdv, Gábor
4

próbáltam, és sajnos úgy se

lamase · 2010. Jún. 22. (K), 18.12
próbáltam, és sajnos úgy se lett jó.
5

persze..

ironwill · 2010. Jún. 22. (K), 18.36
background-image helyett használd a: background-ot a css-ben és nem kell a html-be írnod a background=".."-ot.
6

sajnos úgy se az igazi,

lamase · 2010. Jún. 22. (K), 20.11
sajnos úgy se az igazi, egyedül akkor jó hogy ha table bacgkround="" -ot írok
7

online verzió?

ironwill · 2010. Jún. 22. (K), 20.22
Szia!

Esetleg nem tudnád feltölteni valahová, mert így a képek nélkül.. :(
8

az a baj ha feltöltöm

lamase · 2010. Jún. 22. (K), 22.29
az a baj ha feltöltöm valahova rendesen megjelenik, mert nem emailben lett csatolva, de ha privátba írsz egy email címet szívesen elküldöm
9

ment pm

ironwill · 2010. Jún. 22. (K), 22.36
..
10

email, html - 19. század

szabo.b.gabor · 2010. Jún. 23. (Sze), 07.52
Nem akarlak elkeseríteni, de az e-mail kliensek, webes felületek html, css támogatása kb nulla. táblázat, háttérkép, képek <img> taggel, inline style-ok :), tehát minden amit amúgy nem használnál..

a te esetedben meg is valósítható a dolog így, úgyhogy hajrá :)
11

Az email kliensekkel van baj...

Cooty13 · 2010. Jún. 23. (Sze), 09.56
Én se sok email templatet kódoltam még életemben, de az a tapasztalatom, hogy az Outlook CSS támogatása még a többi "remek" Microsoft termékét is alulmúlja (tekintve, hogy a Word(!) HTML értelmezője fut benne ha jól tudom).

Próbálj mindent berakni inline style-ba, talán az segít. Az tuti, hogy a külső file-ból hívott CSS nem fog működni, a DIV-es felépítést szintén el lehet felejteni. :( Próbálj úgy kódolni email templatet mintha egy igazán gányolt W3C szabványok előtti oldalt próbálnál csinálni és akkor lehet, hogy jó lesz :)