[CSS] Anzeigeproblem

2

27o8

abgemeldet
2 Mai 2006
9.028
933
Ich versuche gerade einen Teil meiner Hauptseite www.richtig-spicken.de als Newsletter zu verwenden dafür habe ich einfach CSS Sachen kopiert und dann wie unten die Mail aufgebaut. Allerdings wird das nicht richtig angezeigt und da ich mich mit CSS nun garnicht soo gut auskenne frag ich mich warum :-?

Code: 
  <html>
  <head>
    <style>
body {
    background-color:#ff9900;
    background-image:url(https://www.richtig-spicken.de/images/bg.jpg);
    background-position:0 0;
    background-repeat:repeat-x;
    color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding:17px 0 0 0;
}

a {
    color:#000000;
    outline:none;
    text-decoration:underline;
    font-size:12px;
}

a:hover {
    color:#000000;
    outline:none;
    text-decoration:underline;
    font-size:12px;
    font-weight:bold;
}

a img {
    border:0;
}

#content {
    background-image:url(https://www.richtig-spicken.de/images/content_bg.jpg);
    float:left;
    font-weight:bold;
    margin:-38px 0 0 6px;
    position:relative;
    width:466px;
}

#footer {
    background-image:url(https://www.richtig-spicken.de/images/footer.jpg);
    height:46px;
    padding:69px 0 0 338px;
    width:128px;
}

#h_leer {
    background-image:url(https://www.richtig-spicken.de/images/leer_head.jpg);
    height:32px;
    width:466px;
}

.bluebox {
    background-color:#0066cc;
    border-left:4px solid #ebf3fb;
    border-right:4px solid #ebf3fb;
    margin:0 0 0 5px;
    padding:0 12px 5px 12px;
    width:453px;
}

.blueboxbottom {
    background-image:url(https://www.richtig-spicken.de/images/bluebox_bottom.jpg);
    background-position:0 0;
    background-repeat:no-repeat;
    font-size:1px;
    height:16px;
    margin:0 0 0 5px;
    width:453px;
}
    </style>
  </head>
  <body>
  <br />  
  <div id="content">
        <div id="h_leer"></div>
        <div class="bluebox">
        Hallo Gremlin,
der User Gremlin hat dir eine Private Nachricht bei https://www.richtig-spicken.de
gesendet, bitte logge dich mit deinen Zugangsdaten ein um sie zu lesen.       
           
        </div>
        <div class="blueboxbottom"></div>
        
  
     <div align="center" style="font-size:10px;">
     Diese Mail ist kein Spam.<br>
     Sie erhalten diese Mail weil Sie Mitglied bei Richtig-Spicken.de sind.
     </div>
        <div id="footer"><a href="https://www.richtig-spicken.de/impressum.html"><img src="https://www.richtig-spicken.de/images/button_impressum.jpg" alt="Button: Impressum" title="" /></a><a href="https://www.richtig-spicken.de/kontakt.html"><img src="https://www.richtig-spicken.de/images/button_kontakt.jpg" alt="Button: Kontakt" title="" /></a></div>
  </div>                  
  </body>
  </html>
Wenn ich den Code so verschicke als HTML Mail dann wird die so angezeigt:



hab das was falsch ist mal rot markiert aber fällt ja eh direkt auf... es soll aber so aussehen wie auf https://www.richtig-spicken.de/ (mal abgesehen vom helleren Hintergrund der ist so wegen dem Farbverlauf).

Wer kann mir sagen woran das liegt 8O bzw. wie ich das verbessern kann!?

Gruß und danke
Gremlin
 
Das ist ein Browser Problem würde ich sagen.
Du benutzt Outlook? Das basiert sicher auf dem Internet Explorer und wenn ich den Code speicher und im IE aufrufe sieht es gleich aus, im FF (denke ich mal, so würden es dann Thunderbird User sehen?) gibt es aber auch einen Fehler ;)
https://www.7pics.info/?image=Unbenannt_9c9.png

Habe gerade wenig Zeit, wenn dir nachher noch keiner geholfen hat, werde ich mir den HTML Code mal genauer ansehen.
 
Das mit dem Browser war das richtige Stichwort ;) denn ich habe auf dem Server zwei css Dateien hab jetzt im Quelltext der Mail das so abgeändert wie auf der Seite im Header:

Code: 
  <html>
  <head>

<link rel="stylesheet" media="screen" href="https://www.richtig-spicken.de/css/style.css" type="text/css" />
<!--[if lt IE 6]>
<link rel="stylesheet" media="screen" href="https://www.richtig-spicken.de/css/ie5.css" />
<![endif]-->
    
  </head>
  <body>
  <br />  
  <div id="content">
        <div id="h_leer"></div>
        <div class="bluebox">
        Hallo Gremlin,
der User Gremlin hat dir eine Private Nachricht bei https://www.richtig-spicken.de
gesendet, bitte logge dich mit deinen Zugangsdaten ein um sie zu lesen.       
           
        </div>
        <div class="blueboxbottom"></div>
        
  
     <div align="center" style="font-size:10px;">
     Diese Mail ist kein Spam.<br>
     Sie erhalten diese Mail weil Sie Mitglied bei Richtig-Spicken.de sind.
     </div>
        <div id="footer"><a href="https://www.richtig-spicken.de/impressum.html"><img src="https://www.richtig-spicken.de/images/button_impressum.jpg" alt="Button: Impressum" title="" /></a><a href="https://www.richtig-spicken.de/kontakt.html"><img src="https://www.richtig-spicken.de/images/button_kontakt.jpg" alt="Button: Kontakt" title="" /></a></div>
  </div>                  
  </body>
  </html>
Aber es ändert sich leider nichts dran :-?.

*edit*
Im FF ist es schonmal richtig dargestellt :)

*edit2*
Die Hauptseite www.richtig-spicken.de sieht im IE auch normal aus, wenn ich den Newsletter jedoch aufrufe im IE dann ist es dort immer noch falsch jetzt kommt sogar noch hinzu das der blaue Content zu kurz ist (Breite)

Gruß
Gremlin
 
Zuletzt bearbeitet:
Ich habs ;)
Nimm mal
HTML: 
<!--[if lt IE 7]>
<link rel="stylesheet" media="screen" href="https://www.richtig-spicken.de/css/ie5.css" />
<![endif]-->
anstatt
HTML: 
<!--[if lt IE 6]>
<link rel="stylesheet" media="screen" href="https://www.richtig-spicken.de/css/ie5.css" />
<![endif]-->
Du willst ja auch den Browser IE 6 mit einschließen ;)


Warum das allerdings mit lt IE 6 auf deiner Seite geht weiß ich nicht, wundert mich...
 
chrissel schrieb:
Warum das allerdings mit lt IE 6 auf deiner Seite geht weiß ich nicht, wundert mich...
Zum Vergrößern anklicken....

Liegt daran, dass Programme wie Outlook den Code absolut misshandeln. Sie setzen z.B. einen anderen Doctype. Mit dem richtigen Doctype ist nur ein extra Stylesheet für den IE5 aufgrund des Boxsystems von Nöten, also lt IE6.
Dadurch, dass Outlook den Code in einen quirksmodeähnlichen Zustand zerschießt, müssen die Angaben scheinbar auch für den IE6 gelten.
 
Zman schrieb:
Liegt daran, dass Programme wie Outlook den Code absolut misshandeln. Sie setzen z.B. einen anderen Doctype. Mit dem richtigen Doctype ist nur ein extra Stylesheet für den IE5 aufgrund des Boxsystems von Nöten, also lt IE6.
Dadurch, dass Outlook den Code in einen quirksmodeähnlichen Zustand zerschießt, müssen die Angaben scheinbar auch für den IE6 gelten.
Zum Vergrößern anklicken....

Wie das in Outlook aussieht, habe ich gar nicht getestet ;)
Hatte nur den Code genommen, in eine *.html gepackt und im IE 6 aufgerufen. Da war auch das Problem 8O
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben