Avatar billede holckie Nybegynder
15. februar 2011 - 14:59 Der er 6 kommentarer og
1 løsning

HTML mail centreres i Gmail/Hotmail

Jeg har lavet en HTML mail, der ser fin ud i Outlook samt en række andre mailklienter. Men i Gmail og Hotmail centreres teksten. HTML mailen er primært opbygget i tabeller og det ser ud til at en align="center" på den yderste tabel centrerer alle teksten i de underliggende tabeller.

Jeg har forsøgt mig med både css styles "text-align: left" og en almindelig align="left" på de celler og rækker, hvor teksten skal venstrestilles.

Er der nogen, der har en god idé til, hvordan man løser center-problemet i Gmail og Hotmail klienterne?
Avatar billede dmdisco Nybegynder
15. februar 2011 - 15:29 #1
prøv at brug et <center> tag hotmail og gmails parser er håbløse
Avatar billede dmdisco Nybegynder
15. februar 2011 - 15:29 #2
rundt om de ting der skal centreres altså
Avatar billede mcb2001 Nybegynder
15. februar 2011 - 15:38 #3
du kan også bare bruge align="left" på alle de under-tabeller du har.
Avatar billede holckie Nybegynder
15. februar 2011 - 15:58 #4
Jeg kan desværre ikke få det til at virke. Prøvede først at sætte en <center> tag rundt om den yderste table. Dernæst har jeg forsøgt at sætte en align="left" på samtlige <table> <tr> og <td> tags der ligger under. Men ingen af delene ser ud til at fungere i Gmail/Hotmail og IE. Se kode nedenfor:

-----------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
        <meta name="generator" content="Adobe GoLive">
        <title>Nyhedsbrev Erhverv</title>
        <style type="text/css">
            body
            {
                font-family: Arial;
                font-size: 11px;
                color: #000000;
                line-height: 16px;
            }
            p
            {
                font-family: Arial;
                font-size: 11px;
                color: #000000;
                line-height: 16px;
            }
            table
            {
                font-family: Arial;
                font-size: 11px;
                color: #000000;
                line-height: 16px;
            }
            td
            {
                font-family: Arial;
                font-size: 11px;
                color: #000000;
                line-height: 16px;
            }
            .header2
            {
                font-family: arial;
                font-size: 14px;
                color: #000000;
                font-weight: bold;
            }
        </style>
    </head>
    <body bgcolor="#ffffff">
        <center>
        <table width="700" border="0" cellpadding="0" cellspacing="0" style="border: 0px;">
            <tr align="center">
                <td align="center"><p align="center" style="margin-bottom: 20px;"><a href="http://#" target="_blank" style="color:#184173; text-decoration:underline;">Klik her, hvis nyhedsbrevet ikke vises korrekt</a></p></td>
            </tr>
            <tr align="left">
                <td align="left"><a href="http://www.google.com" target="_blank"><img src="201102.jpg" alt="Nyhedsbrev Erhverv" border="0" width="700" height="154"></a></td>
            </tr>
            <tr align="left">
              <td align="left" height="50">&nbsp;</td>
              </tr>
            <tr align="left">
                <td align="left">
                    <table align="left" width="700" cellspacing="0" cellpadding="0">
                        <tr align="left">
                            <td align="left" valign="top" width="450">
                                <table align="left" width="450" cellspacing="0" cellpadding="5">
                                    <tr align="left">
                                        <td align="left" width="440" bgcolor="#f5f5f5"><span class="header2">Tilmeld dig - og f&aring; relevante tilbud og r&aring;dgivning</span></td>
                                    </tr>
                                    <tr align="left">
                                        <td align="left"><p align="left"><a href="#" target="_blank"><img src="email.jpg" alt="F&aring; gode tilbud og r&aring;dgivning" height="79" width="100" align="right" border="0" hspace="20"></a>Vi vil gerne give dig de bedste og mest relevante tilbud fra EnergiMidt ved blandt andet at m&aring;lrette vores information endnu mere. Derfor vil vi gerne vide, hvem du er og hvad du interesserer dig for.</p>
                                          <p align="left">Brug to minutter p&aring; at give os information<br>
                                          - s&aring; kvitterer vi med mere m&aring;lrettet information og gode tilbud fremover.</p>
                                          <p align="left"><a href="#" target="_blank"><img src="tilmeld-dig-her.gif" alt="Tilmeld dig her" border="0"></a></p></td>
                                    </tr>
                                </table>
                            </td>
                            <td align="left" width="75">&nbsp;</td>
                            <td align="left" width="175" valign="top">
                                <table align="left" width="100%" cellspacing="0" cellpadding="10">
                                      <tr align="left">
                                        <td align="left" bgcolor="#F5F5F5"><p align="left"><strong>Bem&aelig;rk:</strong> Fremover vil du ikke l&aelig;ngere modtage et m&aring;nedligt nyhedsbrev fra EnergiMidt. Du kan i stedet tilmelde dig relevante <a href="#" target="_blank" style="color:#184173; text-decoration:underline;">tilbud og r&aring;dgivning</a> inden for enten <em>el og energi</em> eller <em>fiber og kommunikation</em>. P&aring; den m&aring;de kan vi give dig bedre og mere relevant information.</td>
                                      </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr align="left">
                <td align="left" height="50">&nbsp;</td>
            </tr>
            <tr align="left">
                <td align="left"><a href="#" target="_blank"><img src="bottom.gif" alt="Kontakt EnergiMidt" height="20" width="700" border="0"></a></td>
            </tr>
            <tr align="center">
                <td align="center"><p align="center"><a href="#" target="_blank" style="color:#184173; text-decoration:underline;">Klik her</a>, hvis du &oslash;nsker at afmelde nyhedsbrevet</p></td>
            </tr>
        </table>
        </center>
    </body>
</html>
Avatar billede holckie Nybegynder
02. juli 2011 - 11:51 #5
Ingen af svarene virker
Avatar billede Slettet bruger
02. juli 2011 - 12:11 #6
Selve tabllen skal centreres men alt indholdet venstrestilles, ikke sandt ?
I givet fald burde det være nok med:

<table align="center" style="text-align:left;">

Intet andet
- hverken i de indre tabeller, tr'erne eller td'erne.
Avatar billede rbidstrup Nybegynder
14. februar 2012 - 11:41 #7
Ved godt at det er en gammel tråd men svarer alligevel.

Man må ikke bruge <style> i starten af en mail, da Gmail stripper hele header for styles... Alt CSS SKAL laves som inlines for at det virker i Gmail.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester