position funktioniert bei Opera un IE nicht richtig

[blumentopf]

Hallo,
ich habe eine etwas kompliziertere Seite gebaut mit Javascript und CSS.
Eine Textgrafik mit Balken dient zur Navigation, bei deren Überfahren mit der Maus als Highlight eine teils transparente Grafik darüber gelegt, und in einem anderen Bereich ein Inhalt angezeigt wird. Die Grafiken sind fixiert und bleiben auch beim Scrollen stehen, die Inhalte können gescrollt werden. Die Positionierung funktioniert prima auf Safari und Firefox, auf Opera und IE funktioniert die ganze Seite jedoch überhaupt nicht.
Zu besichtigen ist das hier: Link zur Seite

Die Vorstufe bei der Entwicklung der Seite funktionierte noch auf allen mir verfügbaren Browsern, und liegt hier: Link zur Vorgängerversion

Außerdem wundere ich mich, dass Firefox unter der Rubrik Hören (5.Balken) nicht den Player anzeigt, sondern den für diesen Fall angebrachten Link zur Audiodatei. Bei der Vorgängerversion (s.o.) wurde der Player angezeigt.

Vielleicht weiß jemand Rat. Möglicherweise handelt es sich auch um einen Codefehler, über den der eine Browser hinwegsieht, der andere nicht.

Vielen Dank im Voraus für mögliche Tipps und Grüße!

[MudGuard]

Hi,

ich habe eine etwas kompliziertere Seite gebaut mit Javascript und CSS.
Eine Textgrafik mit Balken dient zur Navigation, bei deren Überfahren mit der Maus als Highlight eine teils transparente Grafik darüber gelegt, und in einem anderen Bereich ein Inhalt angezeigt wird. Die Grafiken sind fixiert und bleiben auch beim Scrollen stehen, die Inhalte können gescrollt werden. Die Positionierung funktioniert prima auf Safari und Firefox, auf Opera und IE funktioniert die ganze Seite jedoch überhaupt nicht.

Schritt 1: Validiere den Code.

Schon die Quelltext-Ansicht im Firefox hätte Dir mit knallroter Farbe gezeigt, wo die Syntax-Fehler liegen:

<!-- Linkleiste -->
<div class="leiste" id="link01"  style="display:none;position:fixed; z-index:5;left:00px; top:100px; "
<div style="position:absolute; left:00px; top:120px;font-size:smaller;color:grey;font-style:italic;">

Derselbe Fehler ist mehrfach wiederholt. Das Tag (ja, wirklich Tag, nicht Element) ist nicht geschlossen.

Außerdem wundere ich mich, dass Firefox unter der Rubrik Hören (5.Balken) nicht den Player anzeigt, sondern den für diesen Fall angebrachten Link zur Audiodatei. Bei der Vorgängerversion (s.o.) wurde der Player angezeigt.

Plugin nicht installiert?

cu,
Andreas

[MudGuard]

Hi,

Übrigens:

Schon die Quelltext-Ansicht

bei der fällt man fast ins DIVirium Tremens ...

Es gibt auch andere Elemente als div.

cu,
Andreas

[blumentopf]

Hallo Andreas,
Danke für den Firefox-Hinweis. Als ungeübter Korrekturleser musste ich übrigens trotzdem noch 10 Minuten auf die roten Zeilen starren, bis ich endlich die fehlenden Schlussklammern entdeckt habe.. und schwups, funktionierts auch.

Nur das mit Firefox und dem Player versteh ich nicht, da er in der oben verlinkten Vorgängerversion der Seite wie gesagt den Player anzeigt. In dieser Version wird auf den Link verzichtet, stattdessen Alternativtext angezeigt.

funktionierende Version:
<object data="media/xenon.mp3" autostart="false" width="200" height="100"
          style="vertical-align:middle; margin-left:30px; margin-right:30px;">
    Ihr Browser kann das Objekt leider nicht anzeigen!
  </object>

bei FF nicht funktionierende Version
<object id="player" data="media/xenon.mp3" autostart="false" width="200" height="100"style="position:absolute;left:5px; top:167px; display:none;vertical-align:left; margin-left:0px; margin-right:100px;" classid= "CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"><param name= "filename" value= "media/xenon.mp3" ><a href="media/xenon.mp3">Hier klicken</a>
</object>

Dann ist mir noch ein kleiner Fehler aufgefallen, der nicht so schlimm ist, dem ich aber auch nicht auf den Grund komme:
Geht man bei den Balken auf der linken Seite auf die darunter erscheinenden Links, und wechselt von einem  Link zum gleich angrenzenden nächsten, bleiben manchmal die Balken hängen, ohne ausgeblendet zu werden. Versteht das jemand?

Vielen Dank für die Hilfe!!

Hier nochmal der Link: klick

[blumentopf]

"bei der fällt man fast ins DIVirium Tremens ..."
..und was empfiehlt sich anstatt div, oder warum sollte man das sparsamer einsetzen. Wie sähe eine elegantere Lösung aus?
Grüße

[Der Martin]

Hallo,

funktionierende Version:
<object data="media/xenon.mp3" autostart="false" width="200" height="100"
          style="vertical-align:middle; margin-left:30px; margin-right:30px;">
    Ihr Browser kann das Objekt leider nicht anzeigen!
  </object>

was hindert dich, diese Variante einzusetzen?

bei FF nicht funktionierende Version
<object id="player" data="media/xenon.mp3" autostart="false" width="200" height="100"style="position:absolute;left:5px; top:167px; display:none;vertical-align:left; margin-left:0px; margin-right:100px;" classid= "CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"><param name= "filename" value= "media/xenon.mp3" ><a href="media/xenon.mp3">Hier klicken</a>
</object>

Ist denn die ActiveX-Komponente msdxm.ocx, die mit der Class-ID angefordert wird, als Plugin für Firefox auf deinem Rechner verfügbar? Auf einer Windows-Maschine und bei Verwendung des IE mag das ja noch sein ...

bei der fällt man fast ins DIVirium Tremens ...
..und was empfiehlt sich anstatt div, oder warum sollte man das sparsamer einsetzen. Wie sähe eine elegantere Lösung aus?

Verwende die Elemente, die die Struktur des Inhalts am besten wiedergeben! Da gibt es Textabsätze (p), Überschriften verschiedener Ordnung (h1 bis h6), Listen (ol oder ul), vereinzelt mal eine Tabelle (table), Formulare (form), ...
Ein div- oder span-Element transportiert dagegen keine Information; es dient nur zur Gruppierung anderer Elemente.

So long,
 Martin

[blumentopf]

was hindert dich, diese Variante einzusetzen?

ich wollte, dass auch bei IE der Player angezeigt wird. Deshalb diese Zeile:
classid= "CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"><param name= "filename" value= "media/xenon.mp3" >
Lasse ich die weg, tut's auf FF, aber wahrscheinlich nicht auf IE. Gibt es vielleicht eine Möglichkeit, diese Zeile nur IE zu widmen?
Besten Dank und Grüße

[Gunnar Bittersmann]

@@blumentopf:

nuqneH

Gibt es vielleicht eine Möglichkeit, diese Zeile nur IE zu widmen?

Na wenn’s denn sein muss: conditional comments. S.a. https://forum.selfhtml.org/?t=198049&m=1329978

Qapla'