Massive Darstellungsfehler beim IE 8

[Eventveranstalter]

Hallo liebe Forum Gemeinde,

ich möchte euch kurz mein Problem schildern. Ich habe eine Website gestaltet und die habe ich für den Firefox optimiert. Im Chrome und im Safari sieht diese Website außer ein paar kleinen vernachlässigbaren Pixelverschiebungen exakt genau so aus wie im Firefox. Jetzt ratet mal welcher Browser wieder sein ganz eigenes Ding macht......... Richtig: Der IE in der Version 8.

Ich beschäftige mich erst seit kurzem mit HTML und CSS und habe schon von allen Ecken gehört das der IE wohl enormen Spaß daran hat, Webdesigner mit irgendwelchen Fehldarstellungen das Leben zur Hölle zu machen. Ich dachte das Problem bestand nur beim IE 6, der ja die Margin und Padding Abstände ganz anders interpretiert hat und auch sonst haufenweise Befehle entweder ganz ignoriert oder Sachen einfach so darstellt wie er es möchte. Aber nein diese Probleme ziehen sich ja wohl durch alle Versionen von IE. Jetzt mal abgesehen davon das es mich brennend interessiert warum MS so ein Müllbrowser auf den Markt bringt und nix dagegen unternimmt, ist es mir natürlich viel wichtiger eine Lösung für meinem Problem zu finden.

Meine Website sieht im IE 8 , und um es jetzt mal ganz überdurchschnittlich milde auszudrücken "anders" aus. Der Header (besteht aus einer Grafik, Background-img natürlich) wird gar nicht angezeigt. Hinter dem Header habe ich eine h1 Überschrift mit der Phark Methode versteckt (verstecken wollen). Die Überschrift ist aber sichtbar. Dahinter der Schwarze Hintergrund aber keine Spur von meinem schönen Header.

Die horizontale Navigation besteht gesteht ebenfalls aus Grafiken die mit einer ul angeordnet wurden. Den Letzten Button (normalerweise auf der rechten Seite) der Navigation, möchte der IE8 lieber in einer neuen Reihe linksbündig direkt unter dem ersten Button der Navigation anzeigen. Grundlos versteht sich. Ich habe alle Maße geprüft. Die Navigation ist NICHT breiter als der Body sondern exakt genau so breit. Die komischen blauen Rahmen die IE sinnlos um Bilder einfügt habe ich bereits entfernt. Trotzdem besteht das Problem weiterhin.

Die Navigation befindet sich innerhalb und nicht wie gewollt, überhalb des Inhaltbereiches (auch eine Hintergrund Grafik). Ansonsten befinden sich alle Sachen nicht mal in der nähe des Ortes wo ich sie Platziert habe. Texte die ein Bild umfließen sollen tun dies nicht usw.

Warum schafft es jeder Browser meine Internetseite super darzustellen außer der IE? Und noch viel wichtiger. Habt Ihr Profis eine Lösung, für mich total verzweifelten, seit Wochen an dieser Webseite sitzenden Anfänger Webdesigner, dessen Website jetzt bei diesem schäbigen MS Produkt nicht richtig dargestellt wird?

Vielen Dank schonmal für euer Verständnis und euch Hilfe! Ich stehe euch natürlich gerne für Fragen bereit. Wenn Ihr es für nötig hält das ich den Link zu der Seite poste dann sagt es.


Lieben Gruß

 

[Timmer]

Hey,

erstmal herzlich willkommen bei HTML.de!

Leider kann man dir ohne Code & Link herzlich wenig helfen. Die Probleme sind sicherlich bekannt unter Webdesignern/-entwicklern, jedoch kommt es immer auf den einzelnen Fall an ;)

MfG Timmer

 

[Eventveranstalter]

Hi Timmer,

Herzlichen Dank für die Aufnahme. Gerne poste ich euch den Link um hier das Problem zu lösen: Dieser Link wurde entfernt!
Bitte einmal im Firefox und einmal im IE betrachten.

 

[Cheffchen]

Hallo,

genau ohne link geht da nichts.

wie "Firefox optimiert" verzichte einfach auf padding soweit es geht und ausrichtung geht auch mit float und dann wieder clear.

aber ohne link :O(.

Cheffchen

 

[Eventveranstalter]

Hi,

ich hatte gerade schonmal den Link gepostet, nur wurde der Beitrag irgendwie nicht freigeschaltet. Hier nochmal der Link: Dieser Link wurde entfernt!
Bitte einmal im Firefox und einmal im IE anschauen.

 

[Tronjer]

Eine weitere Problemquelle bei älteren IE-Versionen sind HTML-Elemente die mit top oder left außerhalb ihres Parents verschoben wurden. Überprüfe das mal im Firebug.

Wenn nichts hilft, kannst du über Conditional Comments immer noch unterschiedliche Stylesheets einbinden oder Browserhacks für den IE in deine CSS-Datei schreiben.

 

[MrMurphy]

Hallo

Warum schafft es jeder Browser meine Internetseite super darzustellen außer der IE?

Weil du HMTL / CSS nicht bestimmungsgemäß benutzt. Das ist in 99% der Fälle die Ursache von Darstellungsproblemen und wird damit wohl auch bei dir zutreffen.

Bei der Beschreibung zur Phark-Methode lese ich z. B. "funktioniert in allen “relevanten” Browsern". Damit ist dann ja wohl auch der IE gemeint. Wenn die bei dir also nicht funktioniert solltest du den Fehler erst mal in deinem Quelltext suchen, bevor du ungerechtfertigt auf bestimmte Browser schimpfst. Die können schließlich nichts für deine Unfähigkeiten.

Gruss

MrMurphy

 

[Cheffchen]

genau :O)

was doch aus so eine ungenaue frage an genauen antworten kommt is immer wieder schön zu sehen, da freud man sich mal richtig :O)

Cheffchen

 

[Eventveranstalter]

Hallo,

ich versuche es jetzt noch mal zum 3. mal hier eine Antwort zu schrieben. Meine vorherigen Antworten mit dem gewünschten Link zur Homepage wurden nicht freigeschalltet.

Wenn die anderen Browser meine Website normal darstellen, muss es der IE auch tun. Es darf doch nicht sein das jedes Unternehmen sein eigenes Ding macht. Da MS aber anscheint schon seit Anbeginn von IE ihre eigenen Standards schafft (warum auch immer) kann man sich über solche Darstellungsfehler ja nur aufregen. Obwohl ich kein jahrelang ausgebildeter IT Fachmann bin, wird mir doch wohl jeder normale Mensch zustimmen das IE in dieser Hinsicht sehr unlogisch und ärgerlich ist.

Zurück zum Thema:
Ich habe die Seite sofern es mir mit meinem bisherigem erworbenen Wissen möglich war, schön mit Div Containern und allem pipapo Strukturiert. Layout und Inhalt schön getrennt. Außer die Anwendung der Phark Methode habe ich keine besonderen Spielereien verwirklicht. Denke ich. Trotzdem stimmt mit der Seite was nicht unabhängig vom Header. Da sitzt nichts mehr da wo es soll. Ich hab das Gefühl das IE Irgendwelche Maße margin oder Pudding Maße ingnoriert. Kann das sein? Das Inhaltelement und die Sidebar sind alle mit margin und padding (padding weil ich einen Rahmen benutze) Werten platziert worden. Also ich versteh die Welt nicht mehr.
Den Code habe ich natürlich 1000 mal angeschaut und versucht den Fehler zu finden, aber wenn alle anderen Browser die Seite fehlerfrei darstellen muss es der IE doch auch tun und daher habe ich keine Ahnung wie ich HTML oder CSS Code nicht bestimmungsgemäß benutzt haben soll

Hier zum 3. mal der Link: Dieser Link wurde entfernt!
Habt ihr noch Vorschläge?

Lieben Gruß

 

[MrMurphy]

Hallo,

Also ich versteh die Welt nicht mehr.

Auch für dich gilt: Erst HTML/CSS lernen, dann anwenden. Dir fehlt einfach das notwendige Hintergrundwissen. Was sollen z. B. HTML5-Elemente in einem XHTML1.0 Quelltext?

Hier mal nur die zur Zeit 45 HTML-Syntaxfehler:

linkentfernt - W3C Markup Validator

und folgend nur die aktuell 10 CSS-Syntaxfehler

linkentfernt

Die solltest du erst mal beseitigen. Danach kann man sich um die logischen Fehler kümmern, die nicht automatisch erkannt werden können.

Gruss

MrMurphy

 

[Cheffchen]

Hallo,

nicht schimpfen, mach die fehler raus und so ganz sauber ist der code auch nicht.
Alleiner die #main_.... variationen, mit margin und padding versucht das zu positionieren anstellen einfach das eine feste breite geben und gut.
Menü mit js alten js gefumel anstelle css wie sich das gehört.

Tipp: alles löschen und noch mal richtig anfangen am besten vom fachmann :O)

Cheffchen

 

[Eventveranstalter]

Hallo,

i love diese typischen Forum üblichen Antworten. Erst Suchfunktion hier, lieber erst googlen da. Erst mal lernen, studieren, Doktortitel in dem Fach machen und wenn man dann nicht weiter weiß dann erst ein Forum Beitrag eröffnen. Is klar. Wozu gibt es den solche Foren? Gerade bei solchen komplexen Themen wie HTML und CSS brauchen Anfänger doch genau so eine Hilfe von Experten um diese Probleme lösen zu können.

Aber erstmal danke für die bisherigen Hilfeversuche. Den HTMl Code habe ich natürlich auch durch diesen Check gejagt. Ich bin alle Fehler durchgegangen im Gegensatz zu dir und musste feststellen das 95 % aller Fehler JavaScript Code ist. Den meisten Java Code hat mein Dreamweaver selber hinzugefügt zum vorladen der Hoher und den Java Code für die Facebook Plug ins habe ich 1 zu 1 kopiert. Schlussfolgerung: Das Programm erkennt keinen Java Code und denkt es handelt sich um HTML Code und bemängelt diesen logischerweise. Also daran kann es ja schonmal nicht liegen.
Die anderen 5 % der HTML Code Fehler, sind Fehler die ich mir nicht erklären kann. Habe alle überprüft und es wurden Sachen bemängelt (rot markiert) die keinen Sinn ergeben. Da wurden die ersten " mehrerer div Container bemängelt (also <div id="#">). Desweiteren wurden mehrere < und > von Tags bemängelt. Macht auch keinen Sinn. Alle Tags sind HTML gemäß < angefangen und hören mit /> auf.
Diese möchtegern Fehler sind ja offensichtlich keine Fehler. Das Programm muss das wohl falsch erkannt haben.
So, nun geht es weiter: Der CSS Check wird mich morgen sicherlich weiterbringen. Danke dafür. Da wurden die ganzen border-radius Befehle bemängelt. Das ist schonmal ein Anfang, denn im IE wird der Border-radius nicht angezeigt. Mal gucken was ich da so falsch gemacht habe.

Da ihr Experten mir bisher noch keine vernünftige Antwort liefern konntet, habe ich mich selber mühsam an die Fehlersuche gemacht und eine Lösung für den Großteil der Darstellungsfehler gefunden. Und das könnte sicherlich viele HTML Anfänger interessieren.
Meine Headergrafik habe ich mit css background-image eingefügt:

Header {
background-image=URL bla bla;
}

Auf diesem Header sind zusätzlich noch 3 weitere Elemente.
Wogegen alle normalen Browser den Header makellos anzeigen, möchte der IE lieber sein ganz eigenes Ding machen. Ich habe herausgefunden das der IE die Hintergrundgrafiken die mit CSS zugeteilt wurden komplett ignoriert. Man kann beim IE anscheint nur Div Containern einen Hintergrund zuweisen damit dieser auch angezeigt wird. Einem HTML Tag wie in diesem Fall der Header, kann man hingegen keine Hintergrundgrafik zuweisen. Wie gesagt die anderen Browser zeigen die aber perfekt an. Wir lernen also daraus, innerhalb des Headers erst einen Div Container anzulegen, der dann die Hintergrundgrafik zugewiesen bekommt. Und in diesen Container soll erst der andere Inhalt eingefügt werden.

Ich habe das ganze mit dem IE8 getestet. Sieht jetzt schonmal viel besser aus asl vorher nach der Beseitigung des Header Fehler. Die Seite mit dem IE6 sieht allerdings wieder wie ein riesiger Müllhaufen aus. Da bin ich immer noch am verzweifeln.

 

[threadi]

Man kann beim IE anscheint nur Div Containern einen Hintergrund zuweisen damit dieser auch angezeigt wird. Einem HTML Tag wie in diesem Fall der Header, kann man hingegen keine Hintergrundgrafik zuweisen. Wie gesagt die anderen Browser zeigen die aber perfekt an. Wir lernen also daraus, innerhalb des Headers erst einen Div Container anzulegen, der dann die Hintergrundgrafik zugewiesen bekommt. Und in diesen Container soll erst der andere Inhalt eingefügt werden.

Das ist eine falsch Annahme, so plump ausgedrückt wie Du es geschrieben hast. Der Internet Explorer bis einschließlich Version 8 kennt keine HTML5-Elemente (zu denen header dazu zählt). Die Version 9 und 10 (mit Windows 8 ausgeliefert) wird diese kennen und damit sicherlich keine Probleme haben. Daher kann es hier zu Beeinträchtigungen in der Darstellung (die man per CSS und nicht per HTML macht) kommen. Das kann man aber alles auch umgehen, wenn man sich mal die HTML5-Tipps zur Kompatiblität mit dem Internet Explorer anschaut: How to get HTML5 working in IE and Firefox 2 | HTML5 Doctor

 

[Tronjer]

Hallo,

i love diese typischen Forum üblichen Antworten. Erst Suchfunktion hier, lieber erst googlen da. Erst mal lernen, studieren, Doktortitel in dem Fach machen und wenn man dann nicht weiter weiß dann erst ein Forum Beitrag eröffnen. Is klar. Wozu gibt es den solche Foren? Gerade bei solchen komplexen Themen wie HTML und CSS brauchen Anfänger doch genau so eine Hilfe von Experten um diese Probleme lösen zu können.

Es ist immer wieder die selbe Situation. Jemand will ein Projekt verwirklichen, welches die eigenen Fähigkeiten überschreitet, baut das aus der Top-Down-Perspektive auf, scheitert dann zwangsläufig an dem einen oder anderen Punkt, postet sein Problem anschließend in einem Forum und ist frustiert, wenn ihm dort niemand mit wenigen Sätzen eine brauchbare Lösung präsentieren kann. Um das tatsächlich so kurz und prägnant erklärt zu bekommen, müsstest du schon über das entsprechende Hintergrundwissen verfügen und dann wiederum würden die Fragen gar nicht erst auftauchen.

Hier ist ein Lösungsansatz, der dich wahrscheinlich auch nicht zufriedenstellen wird, weil er über ein einfaches Forenposting hinausgeht:

HTML5 Boilerplate: The web's most popular front-end template

Solltest du damit nicht zurecht kommen, dann verzichte auf HTML5 oder stell dein Projekt erst einmal zurück und eigne dir die notwendigen Grundlagen an.

 

[Dominic28]

...Da ihr Experten mir bisher noch keine vernünftige Antwort liefern konntet, habe ich mich selber mühsam an die Fehlersuche gemacht und...

Normal sollte das doch Voraussetzung sein, dass man den Fehler erstmal sucht und dann nach einer Lösung dafür fragt (Ob man dann als Lösung sofort Code bekommt ist dann nochmal ne andere Frage). Alles andere zeugt davon, dass man entweder seinen eigenen Code nicht versteht oder keinen Überlick mehr über diesen hat. Natürlich findet man die Fehler oft nicht sofort und manchmal eben auch nicht ohne Hilfe, das hatte hier garantiert jeder schon mal, aber genau dafür ist das Forum ja dann gedacht.

Es kommen einfach viel zu viele die nur einen Fehler sehen und dann sofort hier fragen woher der kommt, ohne irgendwelche Versuche das selber zu lösen. Und wenn man ein Projekt startet sollte man seinen Code schon verstehen. Wenn man dazu Fähig ist, weiß man ungefähr wo der Fehler ist und kann ihn dann entweder selber lösen oder zumindest genauer hinterfragen.

Für Anfänger gibt es genug Tools und Websites, die einem Fehler und deren Lösungen zeigen etc. Und wenn man einfach keine Zeit oder Lust hat den Code zu verstehen bzw. sich mit Fehlern auseinander zu setzen und dadurch etwas dazu zu lernen, muss man sich jemanden suchen der die Website für einen professionell umsetzt. Das kostet dann zwar Geld, aber man kann demjenigen genau sagen was man möchte und kriegt das dann auch.

Nimm das nicht zu persönlich, das war eher auf die allgemeine Situation in dem Bereich bezogen und nicht speziell auf dich ;)

 

[Cheffchen]

Alleiner die #main_.... variationen, mit margin und padding versucht das zu positionieren anstellen einfach das eine feste breite geben und gut.
Menü mit alten js gefumel anstelle css wie sich das gehört.

Wie genau soll dann noch die hilfe sein, soll ich etwa die Seite für dich erstellen und dafür 2h meiner freizeit verschwenden, glaube kaum.

Ich bin dann raus hier, bevor ich mir die ellenlangen beiträge weiter antu die nicht eine lösung als ziel haben.

Cheffchen

 

[Eventveranstalter]

Ich bin dann raus hier, bevor ich mir die ellenlangen beiträge weiter antu die nicht eine lösung als ziel haben.

Nicht nötig wenn man konstruktive Beiträge liefert anstatt jedes mal auf den Betrags Autor herumzuhacken!

Zurück zum Thema:
@threadi: Das war ist doch ein schöner konstruktiver Beitrag. Welcher HTML Einsteiger weiß den schon das der Header ein HTML 5 Tag ist. Für mich klingt Header so einfach, als wäre er schon immer da gewesen. Nagut jetzt weiß ich das und konnte sogar ne Lösung finden.

@trojaner
So wenig Ahnung kann ich ja nicht haben. Hab schließlich ne Website gebastelt die in 3 sehr verbreiteten Browsern ansehnlich ist. Mein Problem ist etwas viel komplexeres als das es Einsteiger wie mir möglich wäre die selber zu Lösen. Ich denke diese Probleme mit dem IE sind bekannt und daher ein ständig aktuelles und wichtiges Thema. Es handelt sich um schwer zu verstehende Eigenheiten dieses Browsers und wer kann da besser helfen als Ihr.

@dominic28
Hi, ich geb mir doch schon Mühe. Aber an bestimmten Stellen komme ich halt nicht weiter. Da wäre es halt schön, wenn man wenigstens ein bisschen Hilfe aus einem Forum bekommen könnte.

@cheffchen
Ich will dich doch nicht verärgern.
Ich würde gerne verstehen wie du deinen Tipp meinst mit margin und padding. Scheint ja hilfreich zu sein. Aktuell habe ich auf der Seite ja einige Div Container. Die habe ich erstmal mit float positioniert. Zusätzlich habe ich mit margin die Container da hingesetzt wo sie hinmüssen. Desweiteren musste ich mit padding einen Innenabstand schaffen damit ich den Rahmen hinzufügen kann. Was ist jetzt an dieser Vorgehensweise falsch.
Wie meinst du das mit eine feste Breite geben? Ich muss so oder so margin und padding benutzen. Der Inhalt muss halt an einer bestimmten Stelle stehen und auf den Rahmen kann ich auch nicht verzichten.

 

[Tronjer]

@trojaner
So wenig Ahnung kann ich ja nicht haben. Hab schließlich ne Website gebastelt die in 3 sehr verbreiteten Browsern ansehnlich ist.

Doch, du hast so wenig Ahnung, das geht aus deinen postings hervor. Ansonsten wüsstest du, was Crossbrowser-Kompatibilität bedeutet, würdest bei einer deutschen Website den IE6 ignorieren und zudem nicht mit Dreamweaver arbeiten. Das alleine wäre ja nicht weiter schlimm, als störend hingegen empfinde ich dein Auftreten. Damit schafftst du dir ganz sicher keine Freunde. Es gibt auch keinen Anspruch darauf, "wenigstens ein bißchen Hilfe aus dem Forum zu bekommen". Die Hilfestellung ist hier freiwillig und geschieht ohne Bezahlung. Nebenbei bemerkt lautet mein Nick Tronjer und nicht Trojaner.

Ich bin auch raus aus diesem Thread. Viel Erfolg noch mit deinem Projekt.

 

[Eventveranstalter]

Hi Trojaner,

Ich ignoriere jetzt den IE 6. Ich denke es gibt eh nicht mehr so viele die diesen Browser nutzen. Danke für den Tipp. Ich hätte jetzt echt gedacht das ich zumindest ein bisschen Ahnung von der Materie habe, aber da schein ich mich ja getäuscht zu haben. Kann bestimmt jeder so ne Internetseite erstellen die in allen Browsern außer dem IE nicht gut aussieht. Naja, aber ich arbeite dran und möchte aus den Postings hier lernen. Mein ,,störendes,, Auftreten ist ,,nebenbei bemerkt,, übrigens nicht ernst gemeint, sondern Teil meines Humors und schonmal gar nicht böse gemeint. Aber wers nicht versteht......

Kann mir jemand erklären warum es falsch ist Dreamweaver zu nutzen? Das verstehe ich nämlich nicht. Das Programm kostet ein Haufen Geld und ich habe eigentlich gedacht das es der Standart bei der Webentwicklung ist.

 

[threadi]

Es gibt keinen Standard bei der Webentwicklung. Jedes Web wird mit dem für die Anforderungen des Webs passenden und für den Entwickler gewohnten Werkzeugen erstellt. Ich habe Dreamweaver in mehr als 16 Jahren nie verwendet und kenne auch niemanden der das Programm aktiv nutzt in meiner Umgebung.

Ein Nachteil von Dreamweaver ist, dass man sich von dem dort erzeugten Quellcode abhängig macht. Per Klick irgendetwas hinzufügen - schön und gut, technisch aber eher von Nachteil. Der erzeugte HTML- und CSS-Code muss im nachhinein meist angepasst werden damit die Webseite in mehreren Browsern identisch aussieht.

Wenn man eine Webseite auf diese Weise erstellen will, dann am Besten mit einem reinen Text-Editor der vlt. noch HTML- und CSS-Sytaxhighlighting unterstützt. Dazu muss man sich natürlich auch mit HTML und CSS intensiv beschäftigen.