CSS width in Outlook 2013 bei Tabellen ohne Funtion, warum?

Hallo Kolleginnen und Kollegen,

ich bin gerade dabei Störungsmeldungen zu erstellen.
Ausgangslage: Störungen wurden nur per Mail verschickt und sollen jetzt per Mail und in das Intranet eingestellt werden, wobei in beiden Fällen das Design gleich / weitestgehends ähnlich sein soll.

Lösungsansatz:

Ich erstelle in VBA eine HTML-Mail mit nachfolgendem Code. Diesen Code schreibe ich zusätzlich in eine HTML-Datei, welche im Intranet veröffentlicht wird.
Soweit passt auch das Design, bis auf das "width: auto" Tag im CSS. In der HTML-Datei ist die Tabelle Variabel und in Outlook wird die Tabelle mit ca. 100 px fest angezeigt.

Kann mit evtl. jemand auf die Sprünge helfen, was ich falsch mache?

<html><FORM METHOD=post NAME=Form1 >
                    <body>
                    <style>
td{
font-family: Consolas,monaco,monospace;
width: auto ;
border: 3px solid;
border-color: black;
}

#coll {
width: auto;
border-collapse: collapse;
}

p {
margin-bottom: 20px;
margin-left: 10px;
font-family: Consolas,monaco,monospace;
font-style: normal;
font-variant: normal;
}

#Adressat{
margin-bottom: 20px;
font-family: Consolas,monaco,monospace;
font: 20px;
color: blue;
font-weight: normal;
text-decoration: none;
}

#Störungshinweis{
color: red;
}

#Nutzerhinweis{
color: green;
}

caption {
text-align: left;
}

h1{
text-align: center;
margin-left: 10px;
font-family: Consolas,monaco,monospace;
font-style: normal;
font-weight: bold;
font: 20px;
font-variant: normal;
}

#unterstrich{
text-align: center;
margin-left: 10px;
font-family: Consolas,monaco,monospace;
font-style: normal;
font-weight: bold;
font: 20px;
font-variant: normal;
text-decoration: underline;
}

h2{
margin-left: 10px;
font-family: Consolas,monaco,monospace;
font-style: normal;
font-weight: bold;
font: 20px;
font-variant: normal;
text-decoration: underline;
}

#H2Adressat{
float: left;
margin-left: 10px;
font-family: Consolas,monaco,monospace;
font-style: normal;
font-weight: bold;
font: 20px;
font-variant: normal;
text-decoration: underline;
}

</style>

                    <TABLE id=coll>
                        <tr><td><h1 id=unterstrich>IT-Service Mitteilung:</h1> <h1>Abteilung </h1>
                         <p> Format(Now, "dd.MM.yyyy HH:mm ")  Uhr </p></td></tr>  
                        <tr><td><br><h2 id=H2Adressat>Adressat:</h2><p id=Adressat> Betroffene Anwenderkreise </p></td></tr>
                        <tr><td><br><h2>Störungshinweis:</h2>
                            <p id=Störungshinweis>Hier steht später der Störungstext.</p></td></tr>
                        <tr><td><br><h2>Nutzerhinweis:</h2>"  
                            <p id=Nutzerhinweis>Hier stehen Hinweise / Anweisungen für den Benutzer!<p></td></tr>
                            </TABLE>
    </FORM></BODY></HTML>

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 316928

Url: https://administrator.de/contentid/316928

Ausgedruckt am: 21.11.2024 um 21:11 Uhr

3 Kommentare

Neuester Kommentar

Hallo.
Öhm, du kappselst den Body-Tag in ein Form-Tag und am Ende ist das Form und das Body-Tag vertauscht ?? Das ist so nicht korrekt. Ein Form-Tag kommt in den Body.

Und width auf
width:100%
setzen, soweit ich dich da verstanden habe.

R.

Hallo ranger,

danke für deine Hilfe. Das hat super geklappt.

Hast du für mich evtl. noch eine Lösung zu dem Proble, dass die "float: left" funktion nicht funktioniert? Hierdurch sollte doch der Absatz direkt hinter der Überschrift angezeigt werden. Dies funktioniert natürlich auch in *.HTML aber nicht in der Mail.
Dieser Fehler wurde leider erst sichtbar, nach dem der Tabellenfehler behoben war.

#H2Adressat{
float: left;
margin-left: 10px;
font-family: Consolas,monaco,monospace;
font-style: normal;
font-weight: bold;
font: 20px;
font-variant: normal;
text-decoration: underline;
}

Danke schon mal im vorraus.
Liebe Grüße Pago

Das ist ein vollkommenes durcheinander in deinem Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Unbenanntes Dokument</title>
</head>
<style>
td {
	font-family: Consolas, monaco, monospace;
	width: auto;
	border: 3px solid;
	border-color: black;
}
#coll {
	width: auto;
	border-collapse: collapse;
}
p {
	margin-bottom: 20px;
	margin-left: 10px;
	font-family: Consolas, monaco, monospace;
	font-style: normal;
	font-variant: normal;
}
#Adressat {
	font-family: Consolas, monaco, monospace;
	font: 20px;
	color: blue;
	font-weight: normal;
	text-decoration: none;
	float:left;
	width:auto;
}
#Störungshinweis { color: red; }
#Nutzerhinweis { color: green; }
caption { text-align: left; }
h1 {
	text-align: center;
	margin-left: 10px;
	font-family: Consolas, monaco, monospace;
	font-style: normal;
	font-weight: bold;
	font: 20px;
	font-variant: normal;
}
#unterstrich {
	text-align: center;
	margin-left: 10px;
	font-family: Consolas, monaco, monospace;
	font-style: normal;
	font-weight: bold;
	font: 20px;
	font-variant: normal;
	text-decoration: underline;
}
h2 {
	margin-left: 10px;
	font-family: Consolas, monaco, monospace;
	font-style: normal;
	font-weight: bold;
	font: 20px;
	font-variant: normal;
	text-decoration: underline;
}
#H2Adressat {
	float: left;
	margin-left: 10px;
	font-family: Consolas, monaco, monospace;
	font-style: normal;
	font-weight: bold;
	font: 20px;
	font-variant: normal;
	text-decoration: underline;
}
#Adressat , #H2Adressat {
	margin:10px;	
}
</style>
<body>
<TABLE id=coll>
  <tr>
    <td><h1 id=unterstrich>IT-Service Mitteilung:</h1>
      <h1>Abteilung </h1>
      <p> Format(Now, "dd.MM.yyyy HH:mm ")  Uhr </p></td>  
  </tr>
  <tr>
    <td>
    	<div id="H2Adressat">Adressat:</div>  
	    <div id="Adressat">Betroffene Anwenderkreise</div>  
	</td>
  </tr>
  <tr>
    <td><br>
      <h2>Störungshinweis:</h2>
      <p id=Störungshinweis>Hier steht später der Störungstext.</p></td>
  </tr>
  <tr>
    <td><br>
      <h2>Nutzerhinweis:</h2>
      <p id=Nutzerhinweis>Hier stehen Hinweise / Anweisungen für den Benutzer!
      <p></td>
  </tr>
</TABLE>
</body>
</html>