Homepage wird im IE nicht richtig angezeigt

simsalabim · 12. Juli 2009

Hallo zusammen,

hab' mich gestern und heute richtig ins Homepage-Erstellen reingekniet und bin schon süchtig danach!

Eigentlich dachte ich, es funktioniert auch wunderbar. Die Seiten werden hervorragend im Phase5-Editor angezeigt, aber leider - wenn ich die Seiten im IE öffnen - fehlt der Hintergrund, das Background-Bild und die Spaltenaufteilung mittels float. Woran könnte es liegen?

Viele Dank schonmal.

Gruß,
Simsalabim

lauras · 12. Juli 2009

Ich weiß warum ich kein Fan des IEs bin xD

Ne jetzt mal im Ernst, schau mal, mit welchen Attributen du diese Bereiche gekennzeichnet hast.

Bsp.: Manche Leute benutzen um ein Hintergrundbild zu erzeugen

Code

background-image: url();

andere benutzen nur

Code

background: url();

Das wird jedoch von verschiedenen Browsern anders interpretiert.
Am besten du postest mal die relevanten Code-Teile, vielleicht ist ja auch irgendwo nur ein kleiner Fehler, auf den die Browser anders reagieren.

Greetz
Laura

simsalabim · 12. Juli 2009

Hi Laura,

danke für die schnelle Antwort. Ich füge mal den Quellcode der index.html-Seite ein. Ich weiß nicht genau, was Du brauchst.

HTML

<!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>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Simsalabim" />
<meta name="editor" content="html-editor phase 5" />
<style type="text/css">
/*<![CDATA[*/
<!--




a:link {color:#ff66ff;text-decoration:none}
a:visited {color:#000066;text-decoration:none}
a:focus {color: #000099;text-decoration:none}
a:hover (color: #ffffff;text-decoration:none}
a:active {color: #cc0000;text-decoration:none}




body  {
         background-color:#9999ff;
         font-family:"Perpetua";
         font-size:14pt;
         color:#000000;
}




#logo  {
         background:url(karawane.jpg) no-repeat top center;
         height:200px;
}




#logo p  {
         font-family:"Charlemagne Std";
         font-style:italic;
         color:white;
         text-align:center;
         font-size:23pt;
         margin-top:10px;
}




#navi {
    float:left;
    width:25%;
    margin-top:3em;
    line-height:3em;




 }




#text {
    margin-left: 20%;
    margin-top:3em;
    text-align:justify;
    width:65%;
 }










-->
/*]]>*/
</style>




<style type="text/css">
/*<![CDATA[*/
 ul.c3 {list-style-image:url(j0438045.png)}
 li.c2 {list-style: none; display: inline}
 ul.c1 {list-style-image:url(j0438046.png)}
/*]]>*/
</style>
</head>
<body>
<div id="logo">
<p>Marion's Seelen-Oase</p>
</div>
<div id="navi">
<ul class="c3">
<li><a href="index.html">Startseite</a></li>
<li><a href="schatzkiste.html">Literarische Schatzkiste</a></li>
<li class="c2">
</li>
<li><a href="ueber.html">Über mich</a></li>
<li><a href="http://www.onlex.de/_gbuch.php4?username=Simsalabim">Gästebuch</a></li>
<li><a href="newsletter.html">Newsletter</a></li>
</ul>
<p style="margin:3em 2em 3em 2em; padding:0.5em; background-color:#ffff99; font-size:12pt; text-align:center; font-weight:bold; line-height:1.5em; border-style:ridge; border-width:2px; border-color:#660033;">Besucher meiner Homepage: <br />
<script language="JavaScript" type="text/javascript" src="http://www.onlex.de/_counter.php4?username=Simsalabim"></script></p>
<p style="font-size:11pt; line-height:1em; text-align:justify; margin-top:3em; margin-right:1.5em;">Zuletzt aktualisiert am 12.07.2009</span></p>
<p style="font-size:11pt; line-height:1em; text-align:justify; margin-right:1.5em;">Alle Texte und Illustrationen: ©2009 Marion Blank</span></p>
<p style="font-size:11pt; line-height:1em; text-align:justify; margin-right:1.5em;">Die Texte dürfen unter Angabe des Copyrights gerne für privaten Gebrauch weitergegeben werden.</span></p>
<p style="font-size:11pt; line-height:1em; text-align:justify; margin-right:1.5em;">Veröffentlichungen sind nur mit Genehmigung der Autorin erlaubt. Kommerzielle Zwecke sind strikt untersagt.</span></p>
<a href="http://www.onlex.de" target="_blank"><img
    src="http://www.onlex.de/onlex.php5?b=16&amp;t=.jpg"
    width="88" height="31" style="border: 0;";
    alt="Gästebuch, Counter und Formmailer mit Spam-Schutz - Kostenlos und werbefrei auf www.onlex.de" />
</a>
</div>
<div id="text">
<p style="color:#ffffff; font-variant:small-caps; font-size:1.1em; font-weight:bold;">Herzlich Willkommen in meiner Seelen-Oase!</p>
<p>text.</p>
</div>
</body>
</html>
</code>

Alles anzeigen

Dank' Dir schon mal.

Gruß,
Simsalabim

lauras · 12. Juli 2009

Ohjemine.

Also bei mir ist die Anzeige im FF als auch im IE gleich.
Eventuell solltest du dir angewöhnen, einen sauberen Code zu schreiben, der ist ziemlich unübersichtlich.

Außerdem sieht mir das ganze sehr nach WYSIWYG aus, da einfach so unnötige Sachen wie

Code

/*<![CDATA[*/
<!--

und

Code

<li class="c2">
</li>

drin vorkommen. Sag mir mal den Sinn dieser Schnipsel, wenn du den Code selbst geschrieben hast.

Grafiken kann ich leider nicht sehen, da ich die nicht habe (btw: wer benennt seine Grafiken mit j0438045.png?), die Darstellung mit float ist bei mir jedoch korrekt.

LG
Laura

simsalabim · 12. Juli 2009

Hi Laura,

ich hab' die Seite durch <a class="postlink" href="http://www.w3.org/">http://www.w3.org/</a> prüfen lassen. Dort wurden diese Korrekturen vorgenommen und ich hab' die beiden Codes einfach so übernommen?!?!!?

die .png-Dateien sind Aufzählungs-Grafiken..., die werden übrigens perfekt angezeigt.

Ich versteh' aber überhaupt nicht, warum die Hintergrundfarbe und der Spaltenumbruch durch Float nicht angezeigt werden.

Was meinst Du mit sauber schreiben?

Viele Grüße,
Simsalabim

lauras · 12. Juli 2009

Hey

Zitat

ich hab' die Seite durch <a class="postlink" href="http://jigsaw.w3.org/">http://jigsaw.w3.org/</a> prüfen lassen. Dort wurden diese Korrekturen vorgenommen und ich hab' die beiden Codes einfach so übernommen?!?!!?

Na wenn ich alles machen würde, was der Validator sagt sähe ich aber alt aus xD
Ich persönlich halte nicht so viel von jigsaw, da es mir durch solche Sachen immer meinen Code verhunzt hat.
Ich würde dir empfehlen, diese Sachen rauszulassen, meiner Meinung nach bringt das nämlich rein gar nichts. (Ich habs grad mal ausprobiert: ohne diesen Schwachsinn das gleiche Ergebnis wie mit - in vier verschiedenen Browsern).

AD.: Besorg dir HTML-Tidy für den Firefox. Benutz ich auch und fnktioniert einwandfrei.

Zitat

Ich versteh' aber überhaupt nicht, warum die Hintergrundfarbe und der Spaltenumbruch durch Float nicht angezeigt werden.

Also bei mir wird es in allen Browsern mit Hintergrundfarbe und richtigem float angezeigt. Nur so am Rande: rosa Schrift auf blau ist ein No-Go! Der Kontrast ist viel zu stark!

Zitat

Was meinst Du mit sauber schreiben?

Sauber schreiben heißt, alle CSS-Angaben gehören z.B. auch in den CSS-Teil, Absätze auch im Code von einander trennen, damit das ganze übersichtlicher wird.
Bei Listen und Einteilungen durch divs Einrückungen vornehmen.
Du wirst sehen, der Code wird viel besser lesbar, und man findet Fehler viel leichter. btw.: Es ist besser, CSS-Dateien auszulagern, damit man nicht jede kleine Änderung auf jeder Seite vornehmen muss, außerdem wird der Code dadurch nochmal übersichtlicher.

Greetz
Laura

simsalabim · 12. Juli 2009

Hallo Laura,

dank' Dir. OK, ich setz' mich morgen nochmal ran... Nach 36 Stunden fast ohne Unterbrechung fallen mir jetzt die Augen zu! :roll:

Viele Grüße,
Simsalabim

simsalabim · 13. Juli 2009

Grrr....jaul....Mama!

Ich krieg' echt die Krise.

Hab' jetzt den ganzen Code aufgeräumt, durch Tidy geschickt etc. pp., aber nach wie vor wird der Hintergrund, die Schrift, das Bild und nix angezeigt in IE und auch nicht im FF. Kann mir bitte jemand helfen? Ich hab' langsam keine Lust mehr.

Hier nun der Quellcode:

HTML

<!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>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Simsalabim" />
<meta name="editor" content="html-editor phase 5" />
<style type="text/css">
<!--




a:link {color:#ffffff;text-decoration:none}
a:visited {color:#000066;text-decoration:none}
a:focus {color: #000099;text-decoration:none}
a:hover (color: #ffffff;text-decoration:none}
a:active {color: #cc0000;text-decoration:none}




body  {
         background-color:#9999ff;
         font-family:"Perpetua";
         font-size:14pt;
         color:#000000;
}




#logo  {
         background:url(background.jpg) no-repeat top center;
         height:200px;
}




#logo p  {
         font-family:"Charlemagne Std";
         font-style:italic;
         color:white;
         text-align:center;
         font-size:23pt;
         margin-top:10px;
}




#navi {
    float:left;
    width:25%;
    margin-top:3em;
    line-height:3em;




 }




#text {
    margin-left: 20%;
    margin-top:3em;
    text-align:justify;
    width:65%;
 }




-->
</style>
</head>
<body>




<div id="logo">
         <p>Marion's Seelen-Oase</p>
</div>




<div id="navi">
         <ul>
                 <li><a href="index.html">Startseite</a></li>
                 <li><a href="schatzkiste.html">Literarische Schatzkiste</a></li>
                 <li><a href="ueber.html">Über mich</a></li>
                 <li><a href="http://www.onlex.de/_gbuch.php4?username=Simsalabim">Gästebuch</a></li>
                 <li><a href="newsletter.html">Newsletter</a></li>
         </ul>




         <p style="margin:4em 8em 3em 0em; padding:0.5em; color:#ffffff; background-color:#6666cc; font-size:10pt; text-align:center; font-weight:bold; line-height:1.5em;">Besucher meiner Homepage: <br />
         <script language="JavaScript" type="text/javascript" src="http://www.onlex.de/_counter.php4?username=Simsalabim"></script></p>
         <p style="font-size:11pt; line-height:1em; text-align:justify; margin-top:3em; margin-right:1.5em;">Zuletzt aktualisiert am 12.07.2009</p>
         <p style="font-size:11pt; line-height:1em; text-align:justify; margin-right:1.5em;">Alle Texte und Illustrationen: ©2009 Marion Blank</p>
         <p style="font-size:11pt; line-height:1em; text-align:justify; margin-right:1.5em;">Die Texte dürfen unter Angabe des Copyrights gerne für privaten Gebrauch weitergegeben werden.</p>
         <p style="font-size:11pt; line-height:1em; text-align:justify; margin-right:1.5em;">Veröffentlichungen sind nur mit Genehmigung der Autorin erlaubt. Kommerzielle Zwecke sind strikt untersagt.</p>
</div>




<div id="text">
         <p style="color:#ffffff; font-variant:small-caps; font-size:1.1em; font-weight:bold;">Herzlich Willkommen in meiner Seelen-Oase!</p>
         <p>Text</p>
</div>




</body>
</html>

Alles anzeigen

Danke schon mal für Eure Hilfe.

Gruß,
Simsalabim

lauras · 13. Juli 2009

Hm.

Also wenn ich es richtig sehe bindest du nur ein Bild ein, oder? Das wird bei mir natürlich nciht angezeigt, aber probier mal es mit
background-image: url()
einzubinden und schreib die Positionsangaben mal extra, vielleicht hast du einfach die falsche Reihenfolge benutzt.

Hintergrund und Schrift wird bei mir einwandfrei angezeigt, schau nochmal, ob du das ganze nicht mit externer CSS-Datei hinkriegst und da wirklich ALLE CSS-Angaben reinpackst!

LG
Laura

AD: Und pass auf, dass alle Dateien (Bilder, Stylesheets usw.) im richtigen Verzeichnis liegen!

simsalabim · 13. Juli 2009

So, hab' jetzt raus gefunden, ab wann er Ärger macht, und zwar wenn ich diese Angaben einfüge:

Code

a:link {color:#ffffff;text-decoration:none} 
a:visited {color:#000066;text-decoration:none} 
a:focus {color: #000099;text-decoration:none} 
a:hover (color: #ffffff;text-decoration:none} 
a:active {color: #cc0000;text-decoration:none}

Dann fliegt im IE und FF alles raus und er übernimmt die Standard-Werte für Schrift, Hintergrund etc.

Hab' ich hier irgendetwas falsch gemacht?

Danke Euch.

Gruß,
Simsalabim

simsalabim · 13. Juli 2009

sorry, hab' raus. Ich hab's ganz oben im CSS-Teil geschrieben, noch über "body". Ist wohl ein no-go?!??!

Jetzt's funktioniert's.

Danke Laura für Deine Hilfe!

Gruß,
Simsalabim

lauras · 13. Juli 2009

Kein Problem.

Ich vermute, dass liegt daran, dass das im CSS-Code von oben nach unten sozusagen "abfärbt". Woran das liegt, keine Ahnung.

Nur komisch, dass bei mir alles richtig angezeigt wurde...

Greetz
Laura

PS.: Die Klammer nach a:hover muss geschweift sein xD

Homepage wird im IE nicht richtig angezeigt

Jetzt mitmachen!

Teilen