# Newsletter wird im IE nicht korrekt angezeigt



## Amr0d (15. Oktober 2004)

Guten Tag,

ich habe einen Newsletter mit Dreamweaver angefertigt und habe ihn zum testen an unsere Mitarbeiter geschickt. Diese wiesen mich dann darauf hin das er nicht korrekt angezeigt würde. Ich selber nutze Firefox und zum verschicken habe ich Thunderbird benutzt, alle anderen in der Firma nutzen jedoch IE und Outlook Express. Mein Problem ist folgendes:

Rechts und links sind Ränder in der Tabelle steht das diese 15 px breit sind genauso wie der hintergrund der in der Tabelle genutzt wird, soweit alles ok, wenn ich jedoch im IE jetzt diese Seite angucke dann zeigt er mir den rechten und linken Rand so an als wäre er nur ca. 8 oder px breit und schneidet somit etwas vom Tabellenhintergrund weg. Im Firefox zeigt er das aber alles korrekt an und da ich nicht so der HTML Künstler bin würde ich euch bitten meinen HTML Code etwas zu optimieren wenn das geht. Auch wenn ihr noch andere Fehler findet bitte ich euch mich darauf hinzuweisen.

Danke

Philipp


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Newsletter</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FADC7D" text="#000000" link="#AD9957" vlink="#AD9957" alink="#AD9957">
<div align="center"> 
  <table width="70%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr> 
      <td colspan="3"><div align="center"><img src="http://www.padermeditech.de/home/newsletter/neu/head.gif" width="800" height="100"></div></td>
    </tr>
    <tr> 
      <td width="15" background="http://www.padermeditech.de/home/newsletter/neu/1.gif">&nbsp;</td>
      <td width="769"><div align="center"> 
          <table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr> 
              <td><p align="center"><font size="3" face="Arial, Helvetica, sans-serif"><strong>Ja 
                  haben wir denn schon Weihnachten?</strong></font></p>
                <p align="center"><font size="2" face="Arial, Helvetica, sans-serif">Um 
                  Ihr Weihnachtsgesch&auml;ft anzukurbeln bieten wir Ihnen ab 
                  sofort unsere Koffermassagebank ENTRADA zu einem Preis an von 
                  dem Sie bisher nur tr&auml;umen konnten.</font></p>
                <p align="center"><img src="http://www.padermeditech.de/home/newsletter/neu/angebot.gif" width="287" height="230"><br>
                </p>
                <p align="center">&nbsp;</p>
                <div align="center">
                  <table width="55%" border="0" cellspacing="0" cellpadding="0">
                    <tr> 
                      <td><font size="2" face="Arial, Helvetica, sans-serif"><strong>Technische 
                        Daten</strong></font></td>
                      <td>&nbsp;</td>
                    </tr>
                    <tr> 
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                    </tr>
                    <tr> 
                      <td><font size="2" face="Arial, Helvetica, sans-serif">H&ouml;he:</font></td>
                      <td><font size="2" face="Arial, Helvetica, sans-serif">Verstellbar 
                        von 70 bis 82 cm</font></td>
                    </tr>
                    <tr> 
                      <td><font size="2" face="Arial, Helvetica, sans-serif">Breite:</font></td>
                      <td><font size="2" face="Arial, Helvetica, sans-serif">60 
                        cm</font></td>
                    </tr>
                    <tr> 
                      <td><font size="2" face="Arial, Helvetica, sans-serif">L&auml;nge:</font></td>
                      <td><font size="2" face="Arial, Helvetica, sans-serif">205 
                        cm inkl. Kopfteil</font></td>
                    </tr>
                    <tr> 
                      <td><font size="2" face="Arial, Helvetica, sans-serif">Gewicht:</font></td>
                      <td><font size="2" face="Arial, Helvetica, sans-serif">15 
                        kg</font></td>
                    </tr>
                    <tr> 
                      <td><font size="2" face="Arial, Helvetica, sans-serif">H&ouml;chstbelastung:</font></td>
                      <td><font size="2" face="Arial, Helvetica, sans-serif">250 
                        kg</font></td>
                    </tr>
                    <tr> 
                      <td><font size="2" face="Arial, Helvetica, sans-serif">H&ouml;chstbelastung 
                        / Kopfteil</font></td>
                      <td><font size="2" face="Arial, Helvetica, sans-serif">15 
                        kg</font></td>
                    </tr>
                  </table>
                  <table width="55%" border="0" align="center" cellpadding="10" cellspacing="0">
                    <tr> 
                      <td width="328"><font size="2" face="Arial, Helvetica, sans-serif">- 
                        Aus Aluminium mit h&ouml;henverstellbarem Kopfteil<br>
                        - Bezug aus robustem SKAI-Kunstleder<br>
                        - Kopfteil mit Nasenschlitz ausgestattet<br>
                        - Handlich und leicht: nur 15 kg, Tragf&auml;higkeit 250 
                        kg<br>
                        - Einfacher Aufbau in nur 14 Sekunden<br>
                        - Inkl. 2 Jahre Gew&auml;hleistung auf tragende Teile</font></td>
                    </tr>
                  </table>
                </div>
                <p align="center">&nbsp;</p>
                <p align="center"><font size="2" face="Arial, Helvetica, sans-serif">Gefertigt 
                  nach DIN-ISO 9001 und UKAS Quality Management sowie CE lt. MPG 
                  in &Uuml;bereinstimmung mit EG Richtlinie 93/42/EWG</font></p>
                <p align="center">&nbsp;</p>
                <p align="center">&nbsp;</p>
                <table width="106%" border="0" cellspacing="0" cellpadding="0">
                  <tr> 
                    <td width="48%"><div align="center"><strong><font size="2" face="Arial, Helvetica, sans-serif">Zubeh&ouml;r</font></strong></div></td>
                    <td width="52%">&nbsp;</td>
                    <td width="52%"><div align="center"><strong><font size="2" face="Arial, Helvetica, sans-serif">Polsterfarben</font></strong></div></td>
                  </tr>
                  <tr> 
                    <td><p><font size="2" face="Arial, Helvetica, sans-serif">Schutzh&uuml;lle<br>
                        f&uuml;r Koffemassagebank ENTRADA<br>
                        Aus beschichtetem, extra rei&szlig;ffestem Nylongewebe.</font></p>
                      <p><font size="2"><img src="http://www.padermeditech.de/home/newsletter/neu/schutz.gif" width="287" height="230"></font></p>
                      <p><font size="2" face="Arial, Helvetica, sans-serif">Mit 
                        2 Rei&szlig;verschl&uuml;ssen, Tragegriff frei<br>
                        Farbe: schwarz</font></p></td>
                    <td>&nbsp;</td>
                    <td><div align="center"><font size="2"><img src="http://www.padermeditech.de/home/newsletter/neu/colors.gif" width="230" height="287"></font></div></td>
                  </tr>
                  <tr> 
                    <td><font size="2" face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
                    <td><div align="left"><font face="Arial, Helvetica, sans-serif"><font face="Arial, Helvetica, sans-serif"><font size="2"></font></font></font></div></td>
                    <td><div align="left"><font face="Arial, Helvetica, sans-serif"><font face="Arial, Helvetica, sans-serif"><font size="2"></font></font></font></div></td>
                  </tr>
                  <tr> 
                    <td><font size="2" face="Arial, Helvetica, sans-serif">Bestellen 
                      Sie jetzt!</font></td>
                    <td><div align="left"><font face="Arial, Helvetica, sans-serif"><font face="Arial, Helvetica, sans-serif"><font size="2"></font></font></font></div></td>
                    <td><div align="left"><font face="Arial, Helvetica, sans-serif"><font face="Arial, Helvetica, sans-serif"><font size="2"></font></font></font></div></td>
                  </tr>
                  <tr> 
                    <td><font size="2" face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
                    <td><div align="left"><font face="Arial, Helvetica, sans-serif"><font face="Arial, Helvetica, sans-serif"><font size="2"></font></font></font></div></td>
                    <td><div align="left"><font face="Arial, Helvetica, sans-serif"><font face="Arial, Helvetica, sans-serif"><font size="2"></font></font></font></div></td>
                  </tr>
                  <tr> 
                    <td><p><font size="2" face="Arial, Helvetica, sans-serif">Zubeh&ouml;r-Set 
                        f&uuml;r ENTRADA </font></p></td>
                    <td><div align="left"><font face="Arial, Helvetica, sans-serif"><font face="Arial, Helvetica, sans-serif"><font size="2"></font></font></font></div></td>
                    <td><div align="left"><font size="2" face="Arial, Helvetica, sans-serif">f&uuml;r 
                        <strong>nur 39,95</strong> &euro;</font></div></td>
                  </tr>
                  <tr> 
                    <td><font size="2" face="Arial, Helvetica, sans-serif">bestehend 
                      aus:<br>
                      1x U-Kissen<br>
                      1x Halbrolle 50x18/9 cm<br>
                      1x Schutzh&uuml;lle (ohne Gurt)</font></td>
                    <td><font size="2" face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
                    <td><font size="2" face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
                  </tr>
                  <tr> 
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                  </tr>
                  <tr> 
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                  </tr>
                  <tr> 
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                  </tr>
                </table>
                </td>
            </tr>
          </table>
          <table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr> 
              <td height="19"> <div align="center"><font size="1" face="Arial, Helvetica, sans-serif">Lieferung 
                  ab Werk. Alle enthaltenen Preise verstehen sich zzgl. der gesetzlichen 
                  MwSt. 16%<br>
                  Copyright&copy; 2004 pader medi.tech</font></div></td>
            </tr>
          </table>
          <br>
        </div></td>
      <td width="15" background="http://www.padermeditech.de/home/newsletter/neu/1.gif">&nbsp;</td>
    </tr>
    <tr> 
      <td colspan="3"><div align="center"><img src="http://www.padermeditech.de/home/newsletter/neu/bottom.gif" width="800" height="34"></div></td>
    </tr>
  </table>
  <font size="1.7"><br>
  </font> </div>
</body>
</html>
```

Selbstverständlich ist dieser Newsletter noch nicht ganz fertig sitze zur Zeit noch dran (Preise, Artikel und Inhalt etc.)


----------



## Gumbo (15. Oktober 2004)

Ich hab mich mal rangesetzt, und die Tabellen und den anderen Kram in semantische Elemente gesetzt, dadurch ist der Quellcode unter anderem schlanker (4,34KB im Gegensatz zu 10,1KB), was bestimmt auch deine Kunden erfreuen wird. Desweiteren habe ich das Problem mit dem Grafikversatz gelöst, indem ich die Grafiken als Hintergrund verwender habe.

Schau's dir am Besten einfach mal an. Falls du Fragen hast, darfst du sie gerne stellen.


----------



## Amr0d (15. Oktober 2004)

Erstmal großes dankeschön an dich aber zwei Fragen habe ich noch:

Wie hast du das gemacht?
Wie kann ich jetzt an deinem Werk weiterarbeiten ohne es wieder kaputt zu machen?


----------



## Gumbo (15. Oktober 2004)

Das Grundgerüst besteht aus einem div-Element, welches wiederum drei div-Elemente für den Kopf-, den Haupt- und den Fußteil beinhaltet.
Weiter habe ich den Inhalt von überflüssigen font-Elemente befreit, und in Überschriften, Abschätzen und Listen aufgeteilt. Die hab ich schließlich mittels CSS gestaltet. Der Vorteil hierbei ist, dass das Dokument auch ohne CSS-Unterstützung (sei es absichtlich oder unabsichtlich) gut les- und auswertbar ist.

Um an dem „Werk“ nichts kaputt zu machen, solltest das Grundgerüst bestehen bleiben. Den Inhalt des div-Elements mit der ID body kannst du gefahrenlos verändern.


----------



## Amr0d (15. Oktober 2004)

Na da bin ich mal gespannt ich wette ich bekomme das kaputt    hoffe mal das das jetzt klappt mit dem editieren


----------



## Amr0d (20. Oktober 2004)

Habe ein ganz fettes Problem und zwar hat sich mein Newsletter zerschossen ich wollte nur ein paar Adressdaten einfügen in einem div-Element und dies wollte ich ein vorhandenes div-Element einfügen, danach sah oder sieht das ganze so aus:


```
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>

	<title>Newsletter</title>
	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<link rel="stylesheet" type="text/css" href="style.css" media="screen" title="Standard Style" />

</head>



<body>
<div id="wrap"> 
  <div id="header"> 
    <h1 id="logo"><a href="http://www.padermeditech.de/" title="pader medi.tech"><span>pader 
      medi.tech</span></a></h1>
  </div>
  <hr class="hidden" />
  <div id="body"> 
    <h2 class="center">Ja haben wir denn schon Weihnachten?</h2>
    <p>Um Ihr Weihnachtsgesch&auml;ft anzukurbeln bieten wir Ihnen ab sofort unsere 
      Koffermassagebank ENTRADA zu einem Preis an von dem Sie bisher nur tr&auml;umen 
      konnten.</p>
    <div class="seperator"></div>
    <div class="center"> 
      <p><img src="http://www.padermeditech.de/home/newsletter/neu/header2.png" alt="pader medi.tech" /></p>
      <h3 align="left">Bestellen Sie jetzt!</h3>
      <p align="left"><strong>Koffermassagebank ENTRADA</strong></p>
      <div align="left"> 
        <ul>
          <h3 align="left"> <br />
            f&uuml;r nur <u>149,06 &euro;</u> (empf. Vk-Preis 215,51 €) </h3>
        </ul>
        &nbsp;</p> <br />
        <strong>Zubeh&ouml;r-Set f&uuml;r ENTRADA bestehend aus:</strong></div>
      <div align="left"> 
        <ul>
          <li>1x U-Kissen</li>
          <li>1x Halbrolle 50x18/9 cm</li>
          <li>1x Schutzh&uuml;lle (ohne Gurt)</li>
        </ul>
      </div>
      <ul>
        <h3 align="left"><br />
          f&uuml;r <strong>nur <u>39,90 &euro;</u></strong> (empf. Vk-Preis 59,95 
          €)</h3>
      </ul>
      <div align="left"> 
        <p>&nbsp;</p>
        <p><strong>Alle Artikel sind selbstverständlich auch separat erhältlich.</strong></p>
        <p>&nbsp;</p>
      </div>
      <h3 align="left">Technische Daten</h3>
    </div>
    <dl>
      <dt>H&ouml;he:</dt>
      <dd>Verstellbar von 70 bis 82 cm</dd>
      <dt>Breite:</dt>
      <dd>60 cm</dd>
      <dt>L&auml;nge:</dt>
      <dd>205 cm inkl. Kopfteil</dd>
      <dt>Gewicht:</dt>
      <dd>15 kg</dd>
      <dt>H&ouml;chstbelastung:</dt>
      <dd>250 kg</dd>
      <dt>H&ouml;chstbelastung / Kopfteil:</dt>
      <dd>15 kg</dd>
    </dl>
    <ul>
      <li>Aus Aluminium mit h&ouml;henverstellbarem Kopfteil</li>
      <li>Bezug aus robustem SKAI-Kunstleder</li>
      <li>Kopfteil mit Nasenschlitz ausgestattet</li>
      <li>Einfacher Aufbau in nur 14 Sekunden</li>
      <li>Inkl. 2 Jahre Gew&auml;hleistung auf tragende Teile</li>
    </ul>
    <p>Gefertigt nach DIN-ISO 9001 und UKAS Quality Management sowie CE lt. MPG 
      in &Uuml;bereinstimmung mit EG Richtlinie 93/42/EWG</p>
    <div class="seperator"></div>
    <div class="left"> 
      <h3>Zubeh&ouml;r</h3>
      <p>Schutzh&uuml;lle f&uuml;r Koffemassagebank ENTRADA aus beschichtetem, 
        extra rei&szlig;ffestem Nylongewebe.</p>
      <div class="center"><img src="http://www.padermeditech.de/home/newsletter/neu/schutz.png" width="287" height="230" alt="" /></div>
      <dl>
        <dt> 
          <div align="left">Ek-Preis:</div>
        </dt>
        <dd> 
          <h3>20,95 €</h3>
        </dd>
        <dt> 
          <div align="left">empf. Vk-Preis:</div>
        </dt>
        <dd> 
          <h3>27,95 €</h3>
        </dd>
      </dl>
      </p>
      </div>
    <div class="right"> 
      <h3>Schutzhülle mit Tragegurt</h3>
      Zum leichten Transport gibt es die Schutzhülle auch mit einem Tragegurt. 
      <p> <img src="http://www.padermeditech.de/home/newsletter/neu/schutz_gurt.png" width="290" height="230" alt="" /><br />
      </p><dl>
        <dt> 
          <div align="left">Ek-Preis:</div>
        </dt>
        <dd> 
          <h3>27,95 €</h3>
        </dd>
        <dt> 
          <div align="left">empf. Vk-Preis:
            <h3>&nbsp;</h3>
          </div>
        </dt>
      </dl>
      </p>
      <h3>39,95 € </h3>
    </div>
    <br />
  </div>
  <hr class="hidden" />
  <div id="footer"> 
    <p>Lieferung ab Werk. Alle enthaltenen Preise verstehen sich zzgl. der gesetzlichen 
      MwSt. 16% und Versandkosten.</p>
    <p>Copyright&copy; 2004 pader medi.tech</p>
  </div>
</div>
</body>
</html>
```

oder hier der link

Klick mich


----------

