# IE (6,7 & 8) stellt Seite völlig falsch dar und gibt Scriptfehler aus!



## tomengel (19. September 2009)

Morgähn 

Ich mache z.Zt. für einen Bekannten von mir eine Portfolio Seite. Die Daten kommen aus einer Datenbank und ich nutze diverse Javascripte für verschiedene Funktionen.

Auf Safari und FF (Mac) und FF Windows funktioniert soweit alles tadellos.

Nur die IE Familien schießt mal wieder quer 

Zum Einen wird das Layout total zerschossen (warum auch immer) und darüber hinaus gibt IE auch noch Scriptfehler aus, die ich mir nicht erklären kann.

Vielleicht habt Ihr ja ein paar Tipps für mich, welche Schrauben ich für die IE Familie anziehen muss.

Die Seite könnt ihr euch unter dieser URL ansehen:
http://www.rose-fotografie.de/dev

Vielen Dank schon mal an Alle!

Sonnige Grüße,

Tom


----------



## Maik (19. September 2009)

Hi,

zunächst mal möchte ich dich darum bitten, zukünftig in unserem Forum auf deinen immer wieder gerne herangezogenen  "Flame-War"-Ausdruck "Windoof" zu verzichten, nur weil im IE ein X-beliebiges Problem auftaucht - vielen Dank! 

Immer schön sachlich bleiben, sag ich da nur, denn die Gründe liegen hier nicht im Betriebssystem, sondern ausschließlich in deinem Code.

Von einem  zerschossenen Seitenlayout würde ich ausschliesslich im IE6, IE7, sowie im FF2.0.x  reden, was die Thumbnail-Vorschau betrifft.

Abhilfe schafft hier die float:left-Deklaration für die DIV-Blöcke *#thumb_wrapper*, da display:inline-block von diesen Browsergenerationen nicht so interpretiert wird, wie es die CSS-Spezifikation vorsieht.

Übrigens darf dieser ID-Bezeichner im (X)HTML-Dokumentbaum nicht mehrmals, sondern nur einmal vergeben werden. Für solche Fälle ist der Klassenbezeichner vorgesehen.

Das Einrücken der Navigationsliste oben links dürfte auf die fehlende Zurücksetzung der voreingestellten Polsterungseigenschaften des <ul>-Elements zurückzuführen sein. Mit margin-left:0 sollte hier die Ausrichtung des Listenelements passen.

Im IE8 kann ich soweit keine Darstellungsfehler im Vergleich zum FF3.0.x und FF3.5.x entdecken.

mfg Maik


----------



## DeluXe (19. September 2009)

Maik hat gesagt.:


> Übrigens darf dieser ID-Bezeichner im (X)HTML-Dokumentbaum nicht mehrmals, sondern nur einmal vergeben werden.


Kleine Ergänzung, da du mit JavaScript arbeitest.
Da, wie Maik schon erwähnt hat, eine ID nur einmalig verwendet werden darf, kann es vorkommen das in manchen Browser auch nur *ein* Element mit der betreffenden ID erkannt wird, wenn man per JavaScript darauf zugreifen möchte.


----------



## Maik (19. September 2009)

DeluXe hat gesagt.:


> Kleine Ergänzung, da du mit JavaScript arbeitest.
> Da, wie Maik schon erwähnt hat, eine ID nur einmalig verwendet werden darf, kann es vorkommen das in manchen Browser auch nur *ein* Element mit der betreffenden ID erkannt wird, wenn man per JavaScript darauf zugreifen möchte.


Es kann nicht nur vorkommen, sondern dem ist tatsächlich so ;-)

mfg Maik


----------



## DeluXe (19. September 2009)

Je nach Browser.


----------



## chmee (19. September 2009)

@DeluXe : *Je nach JS-Engine! *

Maik hat völlig recht. Würde eine Engine eine ID mehrere Male finden, ist das nicht regelkonform und müsste eigentlich mit *FAILED!* benotet werden. Damit werden Scriptingkonventionen übergangen und wir dürfen wieder beim Quirksmode anfangen. Fehler des Coders tolerant behandeln. Na super.

mfg chmee


----------



## DeluXe (19. September 2009)

Nun, ich fange jetzt mal nicht an zu diskutieren... 

Wobei, eines möchte ich dann doch noch los werden: tomengel, welcher Browser hat nochmal welche JS-Engine?

_(Vorsicht, Ironie!)_


----------



## chmee (19. September 2009)

Naja, laß mich raten.. IE macht es falsch ?! Die sollten ihre Codingstrategie mal übern Haufen werfen und bei 0 anfangen.

Offtopic Aus.

mfg chmee


----------



## tomengel (22. September 2009)

Hola,

vielen Dank für die zahlreichen Antworten!

Um eines vorweg zu nehmen: Ich hätte nicht gedacht, dass ein Ausdruck wie "Wind..." die Gemüter "so erhitzen" kann. Wollte damit niemanden persönlich zu nahe treten - schon gar nicht Herrn Gates  . Nehmen wir's mit Humor.

However,

werde eure Anregungen durcharbeiten und melde mich wieder.

BTW: wenn ich statt "display:inline-block;" "float:left;" verwende, wird die Thumbleiste am Ende des übergeordneten Divs umbrochen. Das sollte halt nicht geschehen, daher hatte ich auf "inline-block" zurückgegriffen.

Danke noch mal für den umfangreichen Response.

Sonnige Grüße,

Tom


----------



## chmee (22. September 2009)

Aber nebenbei : Manchmal ist mir sogar IE hilfreich beim Coden. JS-Fehler werden in Firefox manchmal gar nicht gezeigt, IE bricht ab und gibt mir zumindest eine Zeile, in der sich der Fehler befinden soll. 

mfg chmee


----------



## tomengel (22. September 2009)

> Manchmal ist mir sogar IE hilfreich beim Coden



In der Tat ... hab mir vorige Tage extra ein kleines Notebook geholt, damit ich endlich auch mal auf den IE's testen kann ... hab's aber leider noch nicht (zeitl.) geschafft, den VPC mit den verschiedenen Images von MS einzurichten. 

Das muss man MS ja lassen - sie unterstützen die Leute mit solch feinen, kostenlosen Tools (Schade, dass es die nicht für den Mac gibt). Ansonsten wäre es kaum möglich, auf einem System verschiedene Versionen des IE zu testen (oder?). Bin mal auf die Performance gespannt ...

In diesem Sinne,

bis später,

Tom


----------



## chmee (22. September 2009)

Vielleicht wäre dann aber http://tredosoft.com/Multiple_IE hilfreich, wobei ich es noch nicht getestet habe 

mfg chmee


----------



## awortmeier (22. September 2009)

Noch etwas, was nicht mit deinem Problem zutun hat.
wenn man auf "Deteails anzeigen" geht, und das Bild rangezoomt wird, wird dieses unscharf. Gerade fuer einen Fotografen-Portfolio sehr unpassend.

Ich würde das Bild nicht einfach nur skalieren, sondern vieleicht ein neues Bild mit entsprechender Auflösung laden.
J4Info


----------



## Sven Mintel (22. September 2009)

tomengel hat gesagt.:


> Das muss man MS ja lassen - sie unterstützen die Leute mit solch feinen, kostenlosen Tools (Schade, dass es die nicht für den Mac gibt). Ansonsten wäre es kaum möglich, auf einem System verschiedene Versionen des IE zu testen (oder?). Bin mal auf die Performance gespannt ...



VirtualBox gibts auch für Mac

Es gibt aber auch Standalone-Versionen vom IE, die kannst du ohne weitere Hilfsmittel nebenher benutzen(ich hab 3, 4, 5, 5.5, 6 + 7 auf meinem PC "installiert" )

Sowas findest du bei http://browsers.evolt.org

Hier noch nen anderes Tool: http://www.my-debugbar.com/wiki/IETester/HomePage


----------



## tomengel (22. September 2009)

> wenn man auf "Deteails anzeigen" geht, und das Bild rangezoomt wird, wird dieses unscharf. Gerade fuer einen Fotografen-Portfolio sehr unpassend.



Neeeee, auf keinen Fall. Die Leute sollen sich die Fotos nur in der Größe ansehen und nicht mehr. Wenn man die in einer höheren Auflösung/Abmessung bereit stellt, muss man die mit nem Watermark versehen, um dem Bilderklau vorzubeugen. Und ein Watermark in den Bilder finde ich nicht wirklich toll 



> Es gibt aber auch Standalone-Versionen vom IE, die kannst du ohne weitere Hilfsmittel nebenher benutzen(ich hab 3, 4, 5, 5.5, 6 + 7 auf meinem PC "installiert" )





> Vielleicht wäre dann aber http://tredosoft.com/Multiple_IE hilfreich, wobei ich es noch nicht getestet habe



Danke für die Tipps - dafür liebe ich Foren 

Tom


----------



## awortmeier (22. September 2009)

> Neeeee, auf keinen Fall. Die Leute sollen sich die Fotos nur in der Größe ansehen und nicht mehr. Wenn man die in einer höheren Auflösung/Abmessung bereit stellt, muss man die mit nem Watermark versehen, um dem Bilderklau vorzubeugen. Und ein Watermark in den Bilder finde ich nicht wirklich toll



Aber die Größe die du bereitstellst ist unscharf. Und das darf nicht sein auf einem Fotografenportfolio...


----------



## chmee (22. September 2009)

Scheint aber nur beim Ersten zu sein, ich hab andere ausgewählt, da war es besser.

mfg chmee


----------



## tomengel (22. September 2009)

> Aber die Größe die du bereitstellst ist unscharf. Und das darf nicht sein auf einem Fotografenportfolio...





> Scheint aber nur beim Ersten zu sein, ich hab andere ausgewählt, da war es besser.



Ahso, das meintest Du ... die ersten beiden (glaube ich) sind einfach nur nachträglich hochgerechnet, nachdem ich die passende Größe ermittelt hatte. Das sind halt noch nicht die Produktivdaten ... das wird dann noch besser 

Aber danke für die Aufmerksamkeit 

Tom


----------



## Maik (22. September 2009)

tomengel hat gesagt.:


> BTW: wenn ich statt "display:inline-block;" "float:left;" verwende, wird die Thumbleiste am Ende des übergeordneten Divs umbrochen. Das sollte halt nicht geschehen, daher hatte ich auf "inline-block" zurückgegriffen.


Dann sattel  mal dein Markup und Stylesheet um: Div Box mit Bildern ohne zu überlappen (funktioniert in allen gängigen Browsern, darunter auch in der  IE-Familie).

mfg Maik


----------



## tomengel (22. September 2009)

Danke Maik,

diese Lösung kenne ich ... puh, alles umbauen. t das denn dann trotzdem noch mit den gestapelten divs (Focus etc.)? Müsste doch eigentlich, wenn ich nur den Thumb_wrapper gegen die Liste austausche, oder?

BTW: Das Javascrpt zickt immer noch rum, obwohl die Divs nun eine eindeutige ID haben. Habe mal irgendwo (http://bytes.com/topic/javascript/answers/565918-ie-error-parentnode-null-not-object) gelesen, dass der IE Probs mit den parentNode hat

Obwohl bei selfhtml nix davon steht ... mh ... ich liebe es 

Sonnige Grüße,

Tom


----------



## Maik (22. September 2009)

tomengel hat gesagt.:


> funktioniert das denn dann trotzdem noch mit den gestapelten divs (Focus etc.)? Müsste doch eigentlich, wenn ich nur den Thumb_wrapper gegen die Liste austausche, oder?


Probieren geht über studieren ;-)

mfg Maik

P.S. Die "Chat-Kurzform" von funktionieren steht bei uns auf der Black-List, und wird vom System herausgefiltert


----------



## tomengel (22. September 2009)

> P.S. Die "Chat-Kurzform" von funktionieren steht bei uns auf der Black-List, und wird vom System herausgefiltert


 ... und ich hab mich grad schon gewundert, warum da auf einmal nur ein "t" steht.

Wie schnell doch aus guter alter Umgangssprache nicht erwünschte Chat-Kurzformen entstehen. Da soll mal einer, der kaum chattet, hinterherkommen 

Aber gut zu wissen ...


----------



## tomengel (22. September 2009)

Ich noch mal ...

Hab immer noch das JS Problem. Nachdem ich angefangen habe, eure Vorschläge in die Tat umzusetzen, konnte ich auf das "this.parentNode.FirstChild" als Parameter in den "Focus-Funktionen" verzichten, da ich die durch PHP generierte ID gleichzeitig als Funktionsparameter nutzen kann.

Leider sagt mir der IE immer noch, dass ein Scriptfehler vorliegt. Ich schnall es nicht.

Vor allem: wenn man auf "detail anzeigen" klickt und das wieder Overlay schließt, dann zeigt sich auf einmal der "Focus" ... zwar nicht so, wie es soll, aber da tut sich dann was.

Die JS Funktionen könnt ihr ja im Quelltext sehen ... sind wahrlich nicht exotisch und eigentlich total banal. Ach, ich weiß es doch auch nicht ... 

Bau jetzt erstmal die wrapper als Liste, dann ist eine Baustelle schon mal weg.

THANKS,

Tom


----------

