Work-Around für fehlerhafte Seitendarstellung gesucht

    Hallo

    auf der Seite
    http://www.buergerstimmen.de/politik/stadt_1302.htm
    befindet sich rechts und links jeweils ein Banner, der innerhalb eines IFrames mit einem PHP-Skript erzeugt wird und der verlinkt ist.
    in der Version 8 und auch in der Version 9 "vergisst" firefox den Link in Höhe der rotfarbenden Überschrift.
    Besonders ärgerlich wird dieser Fehler auf der Startseite http://www.buergerstimmen.de/, weil dort der Banner quasi fast nicht mehr verlinkt ist.
    Hat jemand eine Idee für einen Work-Around? Ich habe keine Idee, warum Firefox an der Stelle fehlerhaft arbeitet.
    Der Internet-Explorer zeigt hierbei die Seite korrekt an.

    Padina

    Zitat von .Ulli

    Da ich nicht weiß, was ich eigentlich sehen sollte, hier die hiesige Ansicht …


    Das ist exakt die gleiche Darstellung wie hier. Für meinen Begriff also alles okay.

    Schaut man in den Frame (Rechten Mausklick - Aktueller Frame - Quelltext ansehen), sieht man:

    Der Programmierer hat versehentlich vergessen, in den Webseiten des iframe einen <head> oder einen <body> tag zu öffnen und zu schließen.
    Da ist nur eine Tabelle.

    Kann man glücklich sein, dass die Tabelle überhaupt manchmal irgendwie angezeigt wird.

    ~Morgan

    Liebe Teilnehmer,

    vielen Dank für eure Antworten.
    Den Fehler mit dem fehlenden Body-Tag im IFRAME habe ich geändert. Aber das Problem bleibt.

    Um den Fehler aufzuzeigen, musste ich eine Screen-Kamera verwenden, da bei normalen Screenshot die Mauseffekte nicht mit aufgenommen werden. Für die Foto habe ich die aktuelle Firefox Version 9.0.1 mit XP als Betriebssystem verwendet.

    Beispiel http://www.buergerstimmen.de/politik/ngo_1007.htm
    Bild 1
    Der Mauszeiger ist oberhalb der roten Schlagzeile. Der Quicktext wird angezeigt und durch Anklicken kommt man zu Website, die hinterm Banner liegt.
    [Blockierte Grafik: http://www.buergerstimmen.de/test/tl1.jpg]

    Bild 2
    Der Mauszeiger ist in Höhe der rotfarbenden Schlagzeile. Es erscheint kein Quicktext und auch die Verlinkung ist verschwunden. Wenn man hier rumklickt, wird der Text der Schlagzeile markiert
    [Blockierte Grafik: http://www.buergerstimmen.de/test/tl2.jpg]

    Bild 3
    Der Mauszeiger ist unterhalb der rotfarbenden Schlagzeile. Es erscheint wieder der Quicktext. Auch die Verlinkung ist wieder vorhanden.
    [Blockierte Grafik: http://www.buergerstimmen.de/test/tl3.jpg]

    In dem speziellen Beispiel ist der Effekt nur auf den Linken Banner beschränkt. Bei der Übersichtsseite bzw. bei der Startseite mit den Schlagzeilen tritt der Effekt auch beim rechten Banner auf.

    Bild 1.
    Der Mauszeiger oberhalb der Oberhalb der ersten Schlagzeile
    [Blockierte Grafik: http://www.buergerstimmen.de/test/hr1.jpg]
    Bild 2
    Der Mauszeiger ist in Höhe der rotfarbenden Schlagzeile. Es erscheint kein Quicktext. Auch die Verlinkung ist verschwunden.
    [Blockierte Grafik: http://www.buergerstimmen.de/test/hr2.jpg]

    Mit den Effekten bei den Einzelartikeln hätte ich leben könne, aber der Effekt auf der Startseite ist grausam.
    Der Internet-Explorer zeigt diese Effekte nicht. Der Opera-Browser 11.60 zeigt ähnlich Effekte.

    Für den Hinweis auf einen Work-Around wäre ich wirklich dankbar. Ich verstehe den Fehler nicht.

    Dieter

    Zitat von Padina

    Der Opera-Browser 11.60 zeigt ähnlich Effekte.


    Das auch Opera betroffen ist, spricht eher für die Unschuld von Firefox. Insofern könnte sich noch ein weiterer Blick in den Quelltext lohnen.

    Zitat von Padina

    Für den Hinweis auf einen Work-Around wäre ich wirklich dankbar.

    Es gibt keinen. Hier findet ein fröhliches Kegeln mit <div …> statt, welches nur mit einer Änderung der Seite behoben werden kann.

    Es gibt ein <div id="randlinks"> …
    [Blockierte Grafik: http://www.IMG-Teufel.de/thumbs/Bildschirmfotorandlinksc72cd5cbpng.png]

    Das von einem <div id="content"> überlagert wird …
    [Blockierte Grafik: http://www.IMG-Teufel.de/thumbs/Bildschirmfotocontentdc444befpng.png]

    Darin ist ein <p class="headinfo2"> …
    [Blockierte Grafik: http://www.IMG-Teufel.de/thumbs/Bildschirmfotoheadinfo264aceba0png.png]

    der das Bild überlagert. Darum verschwinden an dieser Stelle Mauszeiger und Quicktext.

    Dann mal in die Hände gespuckt …

    Liebe Teilnehmer,

    vielen Dank für die Hinweise.

    Die Seite http://www.buergerstimmen.de/politik/ngo_1007.htm ist W3C-Kompatibel
    http://validator.w3.org/check?uri=http…=Inline&group=0
    und hat auch eine korrekte CSS-Syntax
    http://jigsaw.w3.org/css-validator/…arning=&lang=de
    und der Internet-Explorer ist in der Lage, die Seite korrekt darzustellen

    Es ist also ein Bug im Browser von Firefox und Opera.
    Aber leider kennt hier niemand einen Work-Around. So werde ich wohl weiter rumprobieren müssen.

    Padina

    Zitat von Padina

    Es ist also ein Bug im Browser von Firefox und Opera.

    Es gibt keinerlei Zusammenhang zwischen einem einwandfreien syntaktischen Aufbau und einer korrekten Erstellung / Programmierung einer Seite.

    Was die Ursache ist, wurde dir gesagt.

    Ich rette mal aus den lost files:
    Die Logik der Seitenstruktur ist an manchen stellen nicht was erwüscht ist. Der #content-DIV steht in der Hierarchie unterhalb der Banner und wird damit innerhalb der Layer-Sturktur einer Seite ÜBER den Bannern dargestellt (das zuletzt geladene wir oben drauf gelegt). Das ist nicht nur w3c Standard, sondern einheitliche Logik an die sich auch der IE in der Regel hält. In dem Fall nicht. Er ist damit inkonsequent und damit fehlerhaft in der Darstellung.

    Das DIV mag durchsichtig sein, ist aber trotzdem ein Block-Element und insofern verhält es sich wie eine Glasscheibe. Da kann man nicht "durchklicken".

    Lösung ist recht trivial. Der div#content muss Abstand zum Rand hin halten, der den Bannern den benötigten Platz liefert. Ergo: margin-left:180px; und margin-right:180px;

    Validatoren helfen natürlich bei der Analyse. Aber man muss wissen, was diese prüfen, um das Ergebnis einschätzen zu können. Validatoren prüfen primär Syntax. Nicht Logik. Und das ist ein unterschied. Ich kann dir was syntaktisch korrektes schreiben, was dennoch großen Unsinn darstellt. ; )

    Hallo bugcatcher

    Zitat von bugcatcher


    Lösung ist recht trivial. Der div#content muss Abstand zum Rand hin halten, der den Bannern den benötigten Platz liefert. Ergo: margin-left:180px; und margin-right:180px;


    Das ist der Work-Around, nach dem ich gesucht habe. Er bringt natürlich den Nachteil mit sich, dass unterhalb der Banner rechts und Links breite leere Streifgen bleiben; aber das lässt sich wohl nicht ändern. Ich werde demnächst das Design der Seite ändern, um auf diese Eigenarten von Opera und Firefox einzugehen.

    Lieber Bugcatcher, und Ulli, vielen Dank noch einmal für eure Erläuterungen. Bugcatchers Satz bringt das Problem auf den Punkt:

    Zitat von bugcatcher


    Das DIV mag durchsichtig sein, ist aber trotzdem ein Block-Element und insofern verhält es sich wie eine Glasscheibe. Da kann man nicht "durchklicken".


    Wenn dieser Satz von Firefox und Opera konsequent eingehalten werden würde, so ist es aus meiner Sicht widersprüchlich, dass im http://www.buergerstimmen.de/politik/ngo_1007.htm in einigen Bereichen des Banners der Link zu "sehen" ist und in anderen Bereichen nicht. Die Fotos zeigen eindeutig, dass die Reaktion von Firefox nicht vorhersagbar ist. Das spricht aus meine Sicht nicht unbedingt dafür, dass dieser Effekt gewollt ist.
    Nach diesem Thread stelle ich für mich fest, dass ich die die "Float"-Anweisung im CSS falsch (Also im Stil des Internet-Explorers) verstanden habe. Augenscheinlich darf ich bei Firefox und Opera eine Anwendung der Float-Anweisung nur auf den sichtbaren Text erwarten. Nicht direkt sichtbaren Elemente wie Quicktexten oder Linkzuordnungen werden damit nicht unbedingt immer erfasst, was für mich eher nach einem Fehler als nach Gewollt aussieht.
    Bei der zukünftigen Weiterentwicklung des Designs werde ich diese Eigenarten von Firefox und Opera mit berücksichtigen müssen, da sie weit verbreitete Browser sind.

    Padina (Dieter)

    P.S. Ich danke euch nochmals für eure Hilfe. Beim Work-Around war ich einfach wie blockiert. Ich habe ihn auch schon umgesetzt, so dass die "Fehler" jetzt nicht mehr auftreten.