Forum.EvoComp.de

[Guenter]

Wenn ich http://wbg-koeln.nw.lo-net2.de/joerg/fo ... cript.html oder das "offizielle" Beispiel

http://www.evocomp.de/javascript-demos/ ... lerie.html

im Internetexplorer aufrufe laufen zwei Dinge schief.

1. Das erste kleine Thumb wird nach obern versetzt dargestellt. Die anderen nicht.
2. Der IE gibt als Fehlermeldung an:
Zeile: 82
Zeichen: 3
Fehler: Die hspace Eigenschaften konnten nicht festgelegt werden. Ungültiger Eigenschaftswert. Geben sie einen Wert ein, der größer oder gleich null ist.
Code: o

Kann jemand damit etwas anfangen? hspace wird gar nicht verwendet. Im Firefox taucht das Problem nicht auf

[alm]

Hi,

hspace wird bereits durch den HTML-Teil der Galerie verwendet. Im DIV mit den
Navigationselementen wird beispielsweise das Attribut hspace bei allen Bild-Tags
für die Navigationselemente gesetzt. Hiermit scheint der IE schonmal keine
Probleme zu haben, da sonst auch hier Fehler auftreten müssten. Hspace und vspace
werden verwendet, um die Thumbnails wie auch die Navigation horizontal und vertikal
auszurichten. Dies ist nötig, wenn die Vorschaubilder oder die Navigationsbilder
unterschiedliche Ausdehnungen in X- und Y-Richtung haben.

Auf welche Datei bezieht sich die Fehlermeldung? Ich gehe davon aus, dass die
JS-Datei gemeint ist, auch wenn das mit der Zeilennummer nicht wirklich stimmen
kann. Die Thumbnails werden automatisch durch das Script erzeugt und die Ausrichtung
zyklisch aktualisiert. Beide Attribute gehören offiziell zum IMG-Tag wenn die
Transitional-Variante im Doctype angegeben ist. Die dynamische Anpassung der
Ausrichtungen erfolgt mittels der Funktion ausrichten, die in einem Intervall nach
Ablauf von jeweils 5ms immer wieder aufgerufen wird. Wird der Fehler nur einmal
angezeigt, oder tritt er in Folge immer wieder auf? Das müsste eigentlich der Fall
sein, da hspace immer wieder gesetzt wird.

Die einzige Stelle, wo hspace im Script gesetzt wird ist Zeile 81. Es kann sein,
dass beim ersten Aufruf der Funktion die Höhe des Thumbnails noch nicht vorliegt,
da dieser bis zu diesem Zeitpunkt noch nicht vollständig geladen wurden. Auf der
rechten Seite des Ausdrucks wird die Höhe des jeweiligen Bildes über die Eigenschaft
height abgefragt und wenn das Bild noch nicht geladen wurde, kann es sein, dass
diese Operation schief läuft. Was passiert, wenn du in der Zeile

Code: Alles auswählen

document.getElementById ('thumbnail' + (i + 1)).hspace = (thumb_groesse - document.getElementById ('thumbnail' + (i + 1)).width) / 2;
durch
document.getElementById ('thumbnail' + (i + 1)).hspace = 0;


ersetzt (Genau das sollte heraus kommen, wenn die Bilder alle 80 Pixel breit sind)?
Danach sollte der Fehler nicht mehr auftreten.

Was die Positionierung des ersten Thumbnails angeht: Ich denke, dass hier ein Problem
mit dem CSS-Code vorliegt. Es kann sein, dass allgemeine Vorgaben im Stylesheet
(A-, IMG- oder DIV-Tags) sich auf die Galerie vererben.

Gruss
Alex

[Guenter]

Das Problem tritt ja auch in der offiziellen Beispielseite auf.

Ich dachte auch erst es würde an dem Gerüst meiner Seite liegen.
Ich habe dieses Gerüst dann völlig entfernt und nur das Galerie-Skript verwendet. Dabei hat mein IE das gleiche Problem.

Ich denke Galerie.js ist vom IE gemeint. Zeile 82 stimmt dann zwar nicht, aber es wäre Zeile 81 und genau dort steht ja auch die hspace-Funktion um die thumbs anzuordnen. Im IE sind die kleinen Bilder zudem nicht korrekt ausgerichtet. Im Firefox schon.

Den Änderungsvorschlag habe ich probiert. Jetzt wird der Fehler nicht mehr gemeldet und das erste kleine Bild ist auch nicht mehr nach oben versetzt. Allerdings stimmt der Abstand des ersten Bildes zu den Pfeilen nicht. Er ist deutlich größer als zu den hinteren Pfeilen.

[alm]

Um welche Version des IE handelt es sich denn? Bei der Beispielgalerie werden
ja auch die Ausrichtungen für Navigation und Thumbs berechnet und der IE kann
wohl die Breite und Höhe der Bilder nicht korrekt abrufen. Das kann, wie bereits
gesagt, daran liegen, dass die Bilder noch nicht vorliegen und das Script deshalb
den Fehler meldet, weil der Zugriff auf die Eigenschaft width fehl schlägt. Deshalb
tritt das Problem auch bei der Beispielgalerie auf. Das mit dem größeren Abstand
zur linken Navigation kann ich nachvollziehen. Die vertikale Ausrichtung funktionierte
nach meinen Tests mit dem IE allerdings korrekt und auch die Abstände zwischen
den einzelnen Thmubnails wurden richtig berechnet und gesetzt.

Die Abstände werden jetzt also nicht mehr berechnet und sollten wieder stimmen.
Falls das nicht reicht und der Abstand zum linken Teil der Bildnavigation nicht stimmt,
dann ist wohl eine spezielle Anpassung des Stylesheets für den IE nötig. Der scheint
wohl mit den Inline angeordneten Elementen nicht zurecht zu kommen. Hier ist die
Nutzung einer entsprechenden Browserweiche oder auch eines für den IE eingeführten
Conditional-Comment denkbar. Also einfach mal die Angaben zum Margin und Padding
des UL für die Thumbs oder des letzten Navigationselements für den IE entsprechend
anpassen.

[Guenter]

Es ist der IE 7.0.
Ich habe hier mal das Skript-Archiv durchgekramt und ich habe bei zahlreichen Skripts ähnliche Probleme.

Die vertikale Ausrichtung funktionierte nach meinen Tests mit dem IE allerdings korrekt und auch die Abstände zwischen
den einzelnen Thmubnails wurden richtig berechnet und gesetzt.

Bei mir sind die Bilder einfach leicht nach recht verschoben. Die Abstände zwischen den Bilder stimmen. Aber sie sind als Block nach rechts verschoben.

Also einfach mal die Angaben zum Margin und Padding des UL für die Thumbs oder des letzten Navigationselements für den IE entsprechend anpassen.

Ich werde es versuchen. Ob ich es hinbekomme, weiß ich noch nicht.

[schuhmannfrank]

Hallo Guenter Hallo Alexander,

bin gestern auf das script gestossen - gefällt mir gut die Bildergalerie. Das Problem mit der Darstellung liegt an der Verwendung des ul bzw. li Elements - dadurch werden die Bilder wie in einer Aufzählungsliste eingerückt. Lösung: im Script in Zeile 54 li ersetzen durch span. Im html-code - <ul id="thumbs"> ersetzen durch <span id="thumbs">. CSS anpassen. Habe es mit IE6 und Mozille getestet. Hoffe das hift weiter.

lg frank

[alm]

Hallo Frank,

den Post sehe ich jetzt erst... Das mit der Änderung in ein SPAN ist nicht wirklich eine gute Idee. Es führt dazu, dass der HTML-Code nicht mehr Standardkonform ist. Das Script erzeugt innerhalb des UL-Tags automatisch LI-Elemente. Das mit der Einrückung und dem Aufzählungspunkt wird ja gerade durch die entsprechenden CSS-Angaben verhindert. Dazu steht im Stylesheet der Galerie folgendes:

Code: Alles auswählen

#thumbcontainer ul {
        display:inline;
        padding: 0 5px 0 5px;
}
#thumbcontainer ul li {
        display:inline;
        list-style-type:none;
        padding: 0 10px 0 10px;
}


Durch das "inline" wird festgelegt, dass die einzelnen Listenelemente, die das Script automatisch darunter erzeugt, ohne einen Umbruch in die selbe Zeile gepackt werden. Das "list-style-type:none" besagt, dass der normalerweise vor Listenelementen angezeigte Aufzählungspunkt nicht ausgegeben wird. Mit den Angaben zum Padding werden dann noch die Abstände der Elemente untereinander festgelegt.

Im Allgemeinen hängen Probleme bei der Formatierung mit falschen oder fehlenden CSS-Angaben oder Besonderheiten bestimmter Browser zusammen. In vielen Fällen werden die Formatierungen auch durch andere Regeln überschrieben, die im Stylesheet nach dem Code für die Galerie stehen. Beispielsweise, wenn nach dem Galerie-Sheet noch ein Style definiert wird, welches für alle UL- oder LI-Elemente gilt.

Grüße
Alex

[schuhmannfrank]

hallo alex,

habe mir dann noch mal das css vorgenommen. als erstes einen rahmen um den thumbcontainer-ul-tag gemacht ; tun sich dann komische dinge im IE auf. mit margin:auto oder margin:1px im thumbcontainer-ul-tag sieht dann alles richtig aus. scheint eine besonderheit des IE zu sein.
meine kenntnisse in html sind leider noch nicht so tiefgehend, deshalb eine frage: warum erzeugt die span-variante ungültiges html? habe das mal mit dem w3c validator geprüft - der gibt mir das als ok zurück.

liebe grüße frank

[alm]

Hallo Frank,

das mit den Besonderheiten mit CSS und dem IE ist ein leidiges Thema. Mit der 8er-Version sollte es mit diesem Browser jetzt endlich in Richtung Standardkonformität gehen. Bleibt zu hoffen, dass die Nutzer möglichst schnell umsteigen. Vielleicht wird es dann ja endlich vorbei sein mit den ständigen Extrawürsten für verschiedene IE-Versionen. Mich wundert nur, dass das Beispiel (aus meinem GZ-Archiv) bei mir auch im IE keine Probleme bei der Ausrichtung macht. Aber das wird wohl daran liegen, dass die Angaben mit den anderen CSS-Formaten der Nutzerseiten kollidieren.

Zur Frage: Die HTML-Datei selbst bleibt zwar valide (bzw. so korrekt, wie die Seite, in der die Galerie eingebaut ist), allerdings werden unter dem UL-Element automatisch LI-Elemente eingehängt. Wenn das UL-Element für die Thumbnail durch ein SPAN ersetzt wird, dann ist das dynamisch durch das Script erzeugte Ergebnis natürlich falsch, da LI-Elemente unterhalb des SPANs eingehängt werden, was ja nicht erlaubt ist. Ausserdem führt das zu weiteren Fehlern. Wenn man die CSS-Formate so übernimmt, dann stimmt die Struktur #thumbcontainer ul li nicht mehr. Wird das bei der Änderung nicht berücksichtigt, so klappt die Formatierung auch nicht.

Gruß
Alex