De ruimte tussen tags - Softwareontwikkeling

woensdag 2 december 2015 11:11

Acties:

0 Henk 'm!

BEATI PAVPERES SPIRITV

Topicstarter

Na meer dan 10 jaar T.net is dit officieel de eerste keer dat ik in dit subforum post.

Voor een geautomatiseerde e-mail handtekening in een bedrijf gebruik ik deze code:

HTML:

<HTML>
    <HEAD>
        <TITLE>
        </TITLE>
    </HEAD>
    <BODY>
        <P class=MsoNormal><SPAN style="FONT-FAMILY: 'Arial','sans-serif'; FONT-SIZE: 8pt" lang=FR>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</SPAN>
        </P>
        <P class=MsoNormal><SPAN style="FONT-FAMILY: 'Arial','sans-serif'; FONT-SIZE: 8pt" lang=EN>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</SPAN>
        </P>
    </BODY>
</HTML>

In mijn browsers is er een lege regel tussen die paragrafen, in de e-mail clients - of toch in Outlook - daarentegen niet. Wat nu? Zet ik een tussen die paragrafen? Wat is de reden hiervoor en de elegantste oplossing?

woensdag 2 december 2015 11:15

Acties:

0 Henk 'm!

HuHu

Helpt het als je de HTML-fouten verbeterd? De span-tags worden namelijk niet afgesloten en de waarde van de attributen (class en lang) moet tussen quotes.

woensdag 2 december 2015 11:16

Acties:

0 Henk 'm!

Salmon

.NET developer

Je sluit sowieso je span niet. En je browser interpreteert zelf een als dat er ruimte tussen moet, blijkbaar je email client niet.

Als je een tag opzoek staat er ook onderstaande:

The p element automatically creates some space before and after itself. The space is automatically applied by the browser, or you can specify it in a style sheet.

Wat heb je zelf al gevonden?

^{Of probeer gewoon een break ertussen..}

woensdag 2 december 2015 11:18

Acties:

+1 Henk 'm!

DJMaze

Jouw handtekening werkt niet lekker bij mij (mijn computers kennen het font Arial niet, 8pt is te klein en class="MsoNormal" is MS Word meuk).

Verder, het volgende werkt gedeeltelijk:

HTML:

1	<p style="margin:1em">

Zie dit lijstje: https://www.campaignmonitor.com/css/

Verder moet je je er niet zo druk om maken, alle html code die Outlook/Word voor je maakt werkt op een andere e-mail client maar voor 1% en ziet er dus anders uit.

Maak je niet druk, dat doet de compressor maar

woensdag 2 december 2015 11:20

Acties:

0 Henk 'm!

ByteMe_

Foutlook, een feest voor de developers

https://litmus.com/help/email-clients/outlookcom-margins/

code:

1	<p style="XXXX">

werkt in de meeste situaties goed. Zo stijl je alles naar jouw wens met margin/padding.

Mijn laatste reviews: Xiaomi Mi 9T | Mpow H12

woensdag 2 december 2015 11:23

Acties:

0 Henk 'm!

YellowOnline

BEATI PAVPERES SPIRITV

Topicstarter

De ontbrekende is een copy/paste fout - verbeterd

Nou ja, ik heb er nu maar een gezet voorlopig.

woensdag 2 december 2015 11:27

Acties:

0 Henk 'm!

DJMaze

RonaldDesigns schreef op woensdag 02 december 2015 @ 11:20:
Foutlook

offtopic:
Hahaha die kende ik nog niet

Technisch gezien ondersteund Outlook eigenlijk geen echte HTML, onder de motorkap is het namelijk MSWord.
Vandaar dat animated gifs ook niet werken in Outlook.
https://support.microsoft.com/en-us/kb/933793

Maak je niet druk, dat doet de compressor maar

woensdag 2 december 2015 13:27

Acties:

0 Henk 'm!

Demonitzu

Incidentele gebruiker

code:

1	<SPAN style="FONT-FAMILY: 'Arial','sans-serif'; FONT-SIZE: 8pt" lang=FR>

code:

1	<SPAN style="FONT: 8pt Arial,sans-serif" lang="FR">

TekkenZone - Dutch Tekken Community

woensdag 2 december 2015 13:57

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Toshin schreef op woensdag 02 december 2015 @ 13:27:
code:
1

code:
1

Dat verbetert niks. E-mail werkt nog met een beperkte subset van HTML 4 en daar was deze HTML gewoon valide. Zelfs het afsluiten van de was volgens mij niet per se nodig.

Wat het probleem betreft: in webmail wordt de standaard stylesheet van je browser gebruikt, en bovendien nog whatever de webmailaanbieder zelf aan styles heeft. Daar zit vast een margin op elke tag en omdat je die niet zélf definieert ga je daar discrepanties zien tussen clients. De enige echte oplossing is om alle styling waar je waarde aan hecht op te nemen in de mail zelf zodat je enige browser- of clientstyling meteen zelf weer overschrijft.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

donderdag 3 december 2015 21:16

Acties:

0 Henk 'm!

n8n

HuHu schreef op woensdag 02 december 2015 @ 11:15:
Helpt het als je de HTML-fouten verbeterd? De span-tags worden namelijk niet afgesloten en de waarde van de attributen (class en lang) moet tussen quotes.

Beide zijn in principe correct, alsin quotes zijn niet verplicht (wel onhandig met inline JS) en een span is self-closing aan het einde van de parent.

Of email dat ook zo ziet weet ik niet maar in weze gaat er niks fout.

De ruimte tussen de p-tags is de browser-standaard margin-bottom van 1em. Natuurlijk is het vrij aan elke browser een ander standaard waarde te geven aan styling.

dinsdag 8 december 2015 13:00

Acties:

+1 Henk 'm!

crisp

Devver

Pixelated

n8n schreef op donderdag 03 december 2015 @ 21:16:
[...] en een span is self-closing aan het einde van de parent.

Dat is onderdeel van de error-handling van de parser. Het is echter wel invalid HTML, zie http://www.w3.org/TR/html...ics.html#the-span-element en https://developer.mozilla...ocs/Web/HTML/Element/span :

Tag omission None, both the starting and ending tag are mandatory.

Intentionally left blank

maandag 14 december 2015 13:19

Acties:

0 Henk 'm!

Fontini

De sowieso sluiten. Je kan veel tags open laten en de browser zal zo goed mogelijk zijn best doen te laten zien wat de dev voor ogen had. Het is echter zo dat er maar een paar self-closing elementen zijn en het span element is daar zeker geen een van. Check bijvoorbeeld deze topic http://stackoverflow.com/...span-be-closed-using-span .

Wat jij inderdaad ziet is de default css van je browser. E-mail clients hebben ook een default (of geen) css. Wat je zou kunnen doen is een reset proberen om consistentie zoveel als mogelijk te waarborgen. Misschien is het handig om naar een html e-mail boilertemplate te kijken die deze default styles zoveel als mogelijk gelijk trekt: http://www.paulund.co.uk/html-email-boilerplate .

Succes!

[ Voor 7% gewijzigd door Fontini op 14-12-2015 13:19 . Reden: typo en linkje toegevoegd ]

De ruimte tussen <P> tags