01. juli 2004 - 15:43Der er
8 kommentarer og 1 løsning
Css i e-mail/nyhedsbrev
Hej eksperter...
Jeg er ved at udvikle et nyhedsbrev. Jeg bygger det op, som en ganske almindelig html-side med interne styles/CSS. Men når jeg sender siden, og tjekker den i mit mailprogram, bliver de styles, jeg definerer med en ID-selector (er det ikke det det hedder?!), smadret af at mailprogrammet tilføjer sine egne styles. Det er vist nemmest at vise med et eksempel:
Mine styles:
#topbar {et-eller-andet}
.overskrift {et-eller-andet-andet}
a {noget helt tredie}
...og dette bliver så lavet om til følgende i mailprogrammet:
#message #topbar {et-eller-andet}
#message .overskrift {et-eller-andet-andet}
#message a {noget helt tredie}
Altså, mailprogrammet laver sit eget style "<div id="message></div>", hvori hele mit html-dokument bliver indlejret. Og det smadrer altså mine egne ID'er, hvorimod CLASS og styles på html-tags (vist nok) fungerer ok.
Sker noget tilsvarende i alle mailprogrammer? Hvad kan jeg gøre for at få mit nyhedsbrev/email til at virke med mine styles?
...jeg kunne selvfølgelig lave det hele om, og bygge det op i en tabel i stedet, meeeeen..... det burde da kunne fungere med styles...eller hva' siger eksperterne?!?
Jeg har selv lavet et nyhedsbrev med interne stylesheets. Det virker fint, i hvert fald i de mailprogrammer jeg har testet det i. Jeg brugte CLASS, ikke ID, og definerede desuden table, td, osv., altså f.eks. table.topbar, td.overskrift og så fremdeles.
Hvilket mailprogram er det der ødelægger det? Har du helt udeladt tabeller? Altså sat det alt indhold op i div-tags?
Undskyld jeg først vender tilbage nu. Har skulle nå en masse på hjemmefronten efter fyraften.
...nej, jeg har en stump tabel med også. Men pga forskellige grafiske elementers placeringer (menulinjer, logo-bjælker mv.) i forhold til hinanden, har jeg fundet det absolut nemmest, at placere disse vha. DIV-tags. Jeg har tidligere brugt tabeller en hel del, og forsøgte også til denne, men det var nærmest umuligt, at få det præcist, som jeg gerne vil have det. Derfor valgte jeg DIV-tags. Kan jeg bruge CLASS til at positionere elementer? Andre gode forslag?
Har personligt ikke den store erfaring med ID/DIV, da idéen med CSS aldrig har været at man skal sætte hele eller store dele af layouts op på denne måde. Måske er det også derfor du oplever disse problemer. Desuden renderer et program som Outlook ikke altid HTML og CSS lige så omfattende som en rigtig browser.
Jeg er rimelig overbevist om at dit problem vil blive løst hvis du benytter CLASS i stedet for DIV, da det ses i dit eksempel at emailprogrammet overruler din kode med sine egne #message. Men jeg fornemmer også at dette vil være et ret omfattende arbejde og sikkert ikke er noget du er interesseret i?
Kan umiddelbart ikke komme på andre løsningsforslag, da emailprogrammer oftest er rimelig kræsne og har deres egne regler for hvordan grundlayoutet i en HTML-mail skal se ud. Sørg i øvrigt for at du IKKE vedhæfter eventuelle billedfiler, men derimod smider dem op på en server så de hentes derfra når brugeren åbner mailen.
Men, pixeldude, du har vist overset hvad css betyder ...
Cascading Style Sheets betyder, at styles kan cascades, altså at grundideen er, at man opbygger sine layouts i træ-form (som f.eks. et mappetræ på en harddisk !-), så man kan sætte nogle styles, som så arves ind i underliggende elementer, hvor de måske modificeres og så arves yderligere ud i grenene !o]
(-- og det er csszengarden et eklatant eksempel på, at man netop ikke gør, for selv om det er flot, så holder det ikke en meter, hvis man prøver at finde bare et spor af det allermest grundlæggende i cascading !-)
Ikke at det er ukorrekt, men det er i hvert fald kun (c)SS ...
Jeg har nu lavet alle mine DIV om til CLASS. Men jeg har stadig lidt problemer med at få baggrundsbilleder med - men ellers virker det ok. I øvrigt har jeg erfaret (kommer sikkert ikke som en overraskelse for d'herrer eksperter... ;) ), at de forskellige mailbokse tolker mailsene helt forskelligt. Nogle kan håndtere DIV - de fleste andre kan ikke, nogle af dem tager billederne med - andre vedhæfter dem, nogle af dem lader javascript komme med - de fleste andre fjerner det, osv. Sikke't mareridt at kode op mod.
Nå men jeg tror jeg holder mig til table og CLASS - som >>kreativmedie anbefalede indledningsvis. Det ser da ud til at fungere nogenlunde i de fleste mailbokse...
>>kreativmedie, vil De venligst erlægge et styks svar?
Ja, som jeg skrev tidligere, så er nogle mailbokse ekstremt kræsne og har deres egne regler, men det korte af det lange er i hvert fald at du er bedre tjent med CLASS og tables. Så har du i hvert fald gjort dit til at det ser ens ud i så mange mailbokse som muligt. Ydermere kunne man helt skippe CSS'en og lave nyhedsbrevet kun i HTML, men uha, hvilket helvede dette ville være :)
Og pixeldude: Så sandt at man kan lave komplette designs stort set kun med CSS, men det er altså ikke det det er udviklet til. Man kan også blende jordbær med en skruetrækker, men det er ikke dens primære funktion. Hvis man ikke passer på kunne jeg snildt forestille mig at du kan løbe ind i problemer med hvordan sitet vises i browsere som f.eks. Opera og Mozilla, og især på Mac.
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.