[TYPO3] direct_mail remove header css styles

Sat Apr 12 01:01:52 CEST 2008

Hello Søren,

> And a funny note on this: Today I opened my hotmail account (only
> testing purposes...) and I tried to read the newsletter from the very
> Microsoft himself, and it was hardly readable in Firefox! But of
> course very nice in IE7.

Of course, they have probably coded it for Outlook 2007, and Outlook 2007 
can't render HTML newer than from IE4 days. As you maybe know they are using 
Word as rendering engine even for HTML mails.

But else, both you and Christopher is damn right. Use inline styles, use 
the font-tag, use table-based design. And remember that float, margin and 
some other styles don't work in some MUA's (Outlook 2007).

My experience is, turn of the websites normal header and write it manually 
in TS. Get rid of every attempt of extension CSS, every part of JS (also 
Google Analytics if used). Turn of CSS Styled Content and use styles.content 
and content from Include static. Then you loose all divbased stuff, and images 
are in tables. Allow fontsize and fonts in RTE.

> Med venlig hilsen/Kind regards
> 
> Søren Vedel
> MOC Systems
> www.mocsystems.com
> Blog om TYPO3 og webudvikling
> mocsystems.com/blog/

WBR,
Erik Svendsen
www.linnearad.no

> Redvald Hjulstad wrote:
> 
>> Hi,
>> 
>> I have set up mye template for direct_mail css by using only inline
>> css. But for styling the links I have added this to my ts setup:
>> 
>> page.headerData.10000 = HTML
>> page.headerData.10000.value(
>> <style type="text/css">
>> <!--
>> a {color: #DC1909}
>> -->
>> </style>
>> )
>> 
>> It is working on the website, but when the direct mail is created and
>> ends up in the email inbox that css code is removed from the css.
>> 
>> I have tried it on Apple Mail, Outlook, Gmail and Thunderbird. It is
>> the same on all apps. I think it is removed before it is sent, also
>> because there is some other code that a have not added:
>> 
>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
>> "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
>> <?xml version=3D"1.0" encoding=3D"utf-8"?>
>> <html>
>> <head>
>> <base href=3D"http://mo-mekaniske.no/" />
>> <title>Error!</title>
>> <style
>> type=3D"text/css"><!--/*--><![CDATA[/*><!--*/
>> body { font-family: verdana,arial,helvetica;
>> font-size: 90%;=
>> text-align: center; background-color: #ffffff; }
>> h1 { font-size: 1.2em; margin: 0 0 1em 0; }
>> p { margin: 0; text-align: left; }
>> img { border: 0; margin: 10px 0; }
>> div.center div { margin: 0 auto; }
>> .errorBox { width: 400px; padding: 0.5em;
>> border: 1px solid=
>> black; background-color: #F4F0E8; }
>> /*]]>*/--></style>
>> </head>
>> <body>
>> <div class=3D"center">
>> <img src=3D"typo3/gfx/typo3logo.gif"
>> width=3D"123" height=3D"34"=
>> alt=3D"" />
>> <div class=3D"errorBox">
>> <h1>Error!</h1>
>> <p>The page is not configured! [type=3D
>> 99][]</p>
>> </div>
>> </div>
>> </body>
>> </html>
>> ------------part_2_47ffb70b3ed0e
>> Content-Type: text/html; charset=iso-8859-1
>> Content-Transfer-Encoding: quoted-printable
>> <!DOCTYPE html
>> PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
>> <html>
>> <head>
>> <meta http-equiv=3D"Content-Type" content=3D"text/html;
>> charset=3Diso-88=
>> 59-1" /><link rel=3D"stylesheet" type=3D"text/css"
>> href=3D"cid:part2.2d89=
>> b45f84c2e920ab3805a67fdbd7c6 at twilight.monet.no" />
>> <meta http-equiv=3D"Content-Type" content=3D"text/html;
>> charset=3DUTF-8"= />
>> 
>> <style type=3D"text/css">        </style>
>> 
>> <title>Nyhetsmail fra Mo Mekaniske: Nyhetsmail</title> <meta
>> name=3D"generator" content=3D"TYPO3 4.1 CMS" /> <script
>> type=3D"text/javascript" src=3D"cid:part0.2d89b45f84c2e920ab3805=
>> a67fdbd7c6 at twilight.monet.no"></script>
>> 
>> </head>
>> 
>> How can I keep my own css, and maybe (but this is not important) get
>> rid of the code that´s not mine?
>> 
>> red
>> 