Druckversion des Themas

Hier klicken um das Topic im Orginalformat anzusehen

HTML-Editor phase 5 Support _ HTML _ funktionale Unterschiede zwischen Browsern

Geschrieben von: taraxacum 24.09.2010 - 16:08

Hallo zusammen!

Ich habe gerade ein paar HTML-Seiten erstellt und habe dabei feststellen müssen, dass die Links im IE6 und IE7 (wahrscheinlich auch bei noch älteren) nicht funktionieren (es ändert sich nicht einmal der Mauszeiger vom Pfeil zur Hand), während in anderen Browsern (Firefox, Safari und auch IE8) alles in Ordnung ist. Da Phase 5 als internen Browser offensichtlich auch den IE7 benutzt, obwohl auf meinem Rechner der IE8 installiert ist, tritt auch hier das Problem auf.

Auf der Suche nach einer Lösung habe ich mit anderen Seiten, die ich zuvor erstellt habe, verglichen und bin dabei auf die Idee gekommen, den Eintrag für den doctype von <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> in <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> zu ändern. Und siehe da auf einmal funktionierten die Links auch im IE7 (bzw. internen Browser von Phase 5) bestens. Allerdings haben dann alle IE Versionen die Eigenschaft body {margin:0 auto; width:1000px;} nicht verstanden und den Inhalt statt mittig am linken Rand ausgerichtet.

Hat hier jemand eine Idee, wie beide Fehler verhindert werden können?

Ach ja: Die Seiten gibt's unter

www.vanduehren.de/toeroek/

Gruß
Astrid

Geschrieben von: Thomas 24.09.2010 - 18:50

Hallo Astrid!

Standen die Conditional Comments auch vorher schon drin? Hat es ohne die funktioniert?

Geschrieben von: taraxacum 25.09.2010 - 11:36

Hallo Thomas,

ZITAT(Thomas @ 24.09.2010 - 19:50) *
Standen die Conditional Comments auch vorher schon drin? Hat es ohne die funktioniert?


Meinst Du diese Comments?
INC:"nav.inc","20.09.2010 15:46:30"
...
/INC:"nav.inc"

Die kommen ja von den Includes aus Phase 5. Die habe ich schon oft benutzt und noch nie Probleme damit gehabt.

Gruß
Astrid

Geschrieben von: Thomas 25.09.2010 - 15:32

Sorry,

ich dachte, da du Conditional Comments verwendest, wüsstest du auch, was es ist. Das sind die CSS-Anweisungen für den IE, also das, was z. B. mit

QUELLTEXT
<!--[if IE 5]>
beginnt (siehe z. B. auch in der http://de.wikipedia.org/wiki/Conditional_Comments).

Ich kann den von dir geschilderten Fehler mit dem IE7 nachvollziehen, allerdings fehlt mir die Zeit, das genauer zu analysieren. An deiner Stelle würde ich die Seite erstmal ohne CSS aufbauen und prüfen, ob es dann funktioniert und dann Schritt für Schritt CSS hinzufügen, um den Punkt zu erkennen, ab dem es nicht mehr funktioniert.

Da die Seite korrektes HTML enthält (zumindest laut dem HTML-Validator), liegt es nach meiner Vermutung wahrscheinlich daran, dass die HREFs von irgendetwas überlagert werden (mit der TAB-Taste können sie nämlich angesprungen und dann auch mit Return ausgelöst werden).

Geschrieben von: taraxacum 25.09.2010 - 17:32

sorry, ich kannte nur den Ausdruck nicht.

ZITAT(Thomas @ 25.09.2010 - 16:32) *
An deiner Stelle würde ich die Seite erstmal ohne CSS aufbauen und prüfen, ob es dann funktioniert und dann Schritt für Schritt CSS hinzufügen, um den Punkt zu erkennen, ab dem es nicht mehr funktioniert.

Das war eine gute Idee.
Ich habe es soweit reduzieren können, dass es passiert, sobald ich
QUELLTEXT
div.inhalt {margin-top:-360px;}
einfüge. Dieser Container enthält den Text, der auf der linken Seite des Ringbuches stehen soll. Ich habe dann auch probiert, diesen Container deutlich schmaler zu machen, so dass der Text nur noch ein Drittel der linken Seite einnimmt, was aber nichts nützt.
ZITAT
Da die Seite korrektes HTML enthält (zumindest laut dem HTML-Validator), liegt es nach meiner Vermutung wahrscheinlich daran, dass die HREFs von irgendetwas überlagert werden (mit der TAB-Taste können sie nämlich angesprungen und dann auch mit Return ausgelöst werden).

Ich konnte das Anspringen mit TAB-Taste reproduzieren, das Auslösen mit Return allerdings nicht. Die neue Seite wird bei mir (interner Browser von Phase 5) nicht aufgerufen.

Geschrieben von: Thomas 26.09.2010 - 7:44

ZITAT(taraxacum @ 25.09.2010 - 18:32) *
Ich konnte das Anspringen mit TAB-Taste reproduzieren, das Auslösen mit Return allerdings nicht. Die neue Seite wird bei mir (interner Browser von Phase 5) nicht aufgerufen.
Ich hab das direkt mit dem IE7 getestet, nicht über P5.

So wie du es schilderst, könnte es sein, dass der DIV die UL überlagert. Wenn es mit geringerer Breite des DIVs nicht klappt, versuch doch mal, die Reihenfolge von
QUELLTEXT
<ul class="nav">
und
QUELLTEXT
<div class="inhalt">
im HTML-Code zu vertauschen (dann müsstest du allerdings statt des DIV die UL nach oben verschieben). Grundsätzlich wäre es wahrscheinlich auch besser, mit http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position zu arbeiten anstatt über "margin" von der relativen Position zurückzuversetzen (sollte aber eigentlich nichts mit dem Problem zu tun haben).

Alternativ zum Vertauschen der Reihenfolge könntest du auch noch versuchen, http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index einzusetzen, um sicherzustellen, dass die UL immer über dem DIV liegt.

Geschrieben von: taraxacum 26.09.2010 - 14:53

Weder das Vertauschen von div.inhalt und ul.nav noch das Einfügen von z-index hat etwas gebracht (außer natürlich, dass die Bereiche verrutschen). Ich hatte auch gelesen, dass z-index nur mit einer Angabe zu position funktioniert. Ich habe dennoch diese veränderte Version als http://www.vanduehren.de/toeroek/test.html ins Netz gestellt.
Absolute Positionierung wollte ich nicht benutzen, weil ich dann Probleme habe, die Inhalte (div.inhalt, ul.nav, div.bild) richtig auf dem Ringbuch (welches mittig angeordnet sein soll) zu positionieren. Je nachdem wieviel Pixel in der Breite des Fensters angezeigt werden, passt es oder es verschiebt jenseits des Ringbuches.

Mir ist jetzt zusätzlich aufgefallen, dass auch Links die im div.inhalt enthalten sind, nicht funktionieren (ein E-Mail-Link auf der Kontaktseite: kontakt.html und ein Hyperlink im Impressum: impressum.html).
Das kann ich mir mit Überlagerung gar nicht erklären.

Geschrieben von: Thomas 26.09.2010 - 15:24

Deine Links gehen beide auf die Kontaktseite - trotzdem war das ganz hilfreich, da dort definitiv etwas die Links überlagert.

Die Kontaktseite wird bei mir im IE so angezeigt, dass der Text links über den Hintergrund hinausläuft. Zudem wird der Link in "per E-Mail: info@andreas-schreibbuero.de" zweizeilig angezeigt mit "schreibbuero.de" in der zweiten Zeile - und dieser Teil ist mit der Maus anklickbar, der in der ersten Zeile nicht. Man merkt die Überlagerung auch, wenn man versucht, im IE Text mit der Maus zu markieren.

Irgendwie seltsam. Wenn das Problem definitiv genau dann auftritt, wenn du den DIV.inhalt mit einem margin-top versiehst, muss es eigentlich irgendwie damit zusammenhängen. Andererseits sieht es mir fast so aus, als ob der überlagerte Teil größenmäßig mit der Hintergrundgrafik übereinstimmt.

Geschrieben von: Thomas 26.09.2010 - 15:29

Noch 'ne Idee: Probier mal, den DIV und die UL in den P mit der Hintergrundgrafik zu setzen. Das könnte zum einen die Positionierung etwas vereinfachen (die ja wohl relativ zum Hintergrundbild erfolgen soll) und zum anderen vielleicht auch das Überlagerungsproblem beheben.

Geschrieben von: taraxacum 26.09.2010 - 17:12

ZITAT(Thomas @ 26.09.2010 - 16:29) *
Noch 'ne Idee: Probier mal, den DIV und die UL in den P mit der Hintergrundgrafik zu setzen. Das könnte zum einen die Positionierung etwas vereinfachen (die ja wohl relativ zum Hintergrundbild erfolgen soll) und zum anderen vielleicht auch das Überlagerungsproblem beheben.

Die Positionierung finde ich dadurch nicht einfacher. Aber ich habe jetzt mal die margin-top-Werte so gesetzt, dass der Text auf der linken Seite und das Bild auf der rechten Seite erst in Höhe der unteren Navigationsbutton anfangen. Nun funktionieren die oberen Links wunderbar, während sich die unteren weiterhin durch Funktionslosigkeit auszeichnen. Das spricht tatsächlich für Überlagerung. Aber ich habe keine Vorstellung, wie ich das lösen soll, ohne den Text und das Bild nach unten zu verschieben.

Geschrieben von: Thomas 26.09.2010 - 17:29

Dann wäre noch eine Idee, die Hintergrundgrafik tatsächlich als Hintergrundgrafik des DIV zu definieren und das Bild rechts direkt über CSS zu positionieren (ohne das umgebende DIV, welches eigentlich unnötig ist, da man dessen CSS-Attribute auch dem IMG geben kann).

Ansonsten strecke ich jetzt die Waffen. Ich vermute, dass die margins einen nicht unerheblichen Anteil am Problem haben (da schließe ich auch daraus, dass das Problem erst auftritt, nachdem du eine margin eingefügt hast). Deshalb würde ich, falls es eine meiner Seiten wäre, auf jeden Fall mit Positionierung arbeiten (die geht auch http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position, das habe ich oben etwas missverständlich formuliert). Ansonsten könnte ich das wohl nur lösen, indem ich es selbst nachbaue, und dazu fehlt mir die Zeit.

Falls also obige Idee auch nicht hilft und du weiterhin margins verwenden möchtest, hat eventuell jemand anders noch einen Einfall.

Geschrieben von: Conny 26.09.2010 - 22:40

Hallo,
hab's nur mal überflogen; sieht bei mir (Firefox und IE8) gut aus.
Kann keine Überlagerungen feststellen.

Nur eine andere Kleinigkeit: auf der kontakt.html ist der eMail Link problematisch.
Nach .de sollte ein ? kommen bevor es mit subject weitergeht.
Der Vollständigkeit halber: Leerzeichen mit %20 auffüllen!
(dies aber nur am Rande...)

cu
Conny

Geschrieben von: Conny 26.09.2010 - 22:56

Hoi,
vom Impressum aus funktionieren alle Links!
Lediglich die eMail funktioniert nicht, ist auch nicht als Link definiert, sondern als Absatz <P>.

cu
Conny

Geschrieben von: Thomas 26.09.2010 - 23:53

Hallo Conny,

ZITAT(Conny @ 26.09.2010 - 23:40) *
hab's nur mal überflogen; sieht bei mir (Firefox und IE8) gut aus.
Kann keine Überlagerungen feststellen.
das deckt sich mit der Erfahrung der TE wink.gif
ZITAT(taraxacum @ 24.09.2010 - 17:08) *
Ich habe gerade ein paar HTML-Seiten erstellt und habe dabei feststellen müssen, dass die Links im IE6 und IE7 (wahrscheinlich auch bei noch älteren) nicht funktionieren (es ändert sich nicht einmal der Mauszeiger vom Pfeil zur Hand), während in anderen Browsern (Firefox, Safari und auch IE8) alles in Ordnung ist.

Das Problem liegt bei älteren IE-Versionen, die irgendetwas über die Links legen.

Geschrieben von: taraxacum 27.09.2010 - 16:04

ZITAT(Conny @ 26.09.2010 - 23:40) *
Nur eine andere Kleinigkeit: auf der kontakt.html ist der eMail Link problematisch.
Nach .de sollte ein ? kommen bevor es mit subject weitergeht.
Der Vollständigkeit halber: Leerzeichen mit %20 auffüllen!
(dies aber nur am Rande...)

Vielen Dank für den Hinweis. Das fehlende Fragezeichen bezeichne ich mal als Schreibfehler, während mir die Sache mit den Leerzeichen nicht bewusst war. Ist jetzt aber beides korrigiert.

ZITAT(Thomas @ 26.09.2010 - 18:29) *
Dann wäre noch eine Idee, die Hintergrundgrafik tatsächlich als Hintergrundgrafik des DIV zu definieren und das Bild rechts direkt über CSS zu positionieren (ohne das umgebende DIV, welches eigentlich unnötig ist, da man dessen CSS-Attribute auch dem IMG geben kann).

Ansonsten strecke ich jetzt die Waffen. Ich vermute, dass die margins einen nicht unerheblichen Anteil am Problem haben (da schließe ich auch daraus, dass das Problem erst auftritt, nachdem du eine margin eingefügt hast). Deshalb würde ich, falls es eine meiner Seiten wäre, auf jeden Fall mit Positionierung arbeiten (die geht auch http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position, das habe ich oben etwas missverständlich formuliert). Ansonsten könnte ich das wohl nur lösen, indem ich es selbst nachbaue, und dazu fehlt mir die Zeit.

Falls also obige Idee auch nicht hilft und du weiterhin margins verwenden möchtest, hat eventuell jemand anders noch einen Einfall.

Das Ringbuch als background-image zu verwenden, führte zunächst dazu, dass es komplett verschwand, so dass ich diese Möglichkeit zunächst verwerfen wollte. Dann habe ich noch ein bisschen herumprobiert, vor allem auch mit position:relative, womit ich noch keine Erfahrung habe. Schließlich habe ich noch einmal neu angefangen und dabei alle CSS-Eigenschaften in die Datei hinein genommen, damit ich nichts übersehe. ... und auf einmal war das background-image sichtbar, zwar total verschoben, aber daran konnte ich ja arbeiten. So habe ich jetzt eine Version unter http://www.vanduehren.de/toeroek/test.html, die fast gut ist. Hintergrundgrafik, Text und Navigation am richtigen Ort und funktioniert auch im P5 (IE7 habe ich nur auf einem anderen Rechner, auf den ich gerade keinen Zugriff habe). Das einzige Problem ist jetzt noch das Bild, das sich eigentlich rechts neben der Navigation befinden sollte. Es ist aber ganz unten auf der Seite und lässt sich von dort nicht wegbewegen. Und das unabhängig vom Browser.

Geschrieben von: Thomas 27.09.2010 - 18:39

Dann probier doch nochmal folgendes:

CODE

<style type="text/css">
div.ring {
position: relative;
left: 0;
top: 0;
}

ul.nav {
position:absolute;
left:540px;
top:40px;
}

div.inhalt {
position:absolute;
left:50px;
top:40px;
}

img.bild {
position: absolute;
right: 0;
top: 60px;
}
</style>

Der HTML-Code oben enthält nur die Angaben zur Positionierung, damit klar wird, wie es funktioniert. Natürlich muss der Rest auch wieder rein.

Dadurch, dass DIV.ring relativ positioniert wird (mit top und left 0), passiert erstmal nichts (er steht da, wo er normalerweise auch ohne die Anweisung stehen würde).

Durch die POSITION-Angabe kannst du jetzt aber innerhalb von DIV.ring wieder "position:absolute;" verwenden, welches sich aber auf die Position von DIV.ring bezieht, prinzipiell also relativ zu verstehen ist (das wird auch bei http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position erklärt (Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ), ist aber am einfachsten zu verstehen, wenn man es mal ausprobiert).

So kann man UL.nav, DIV.inhalt und IMG.bild recht einfach innerhalb des DIV.ring positionieren.

Ich habe obigen Code im FF ausprobiert (geht mit dem http://getfirebug.com/ recht einfach und direkt im bestehenden Quellcode), jetzt musst du nur noch testen, ob dass auch mit den anderen Browsern funktioniert. Falls ja, solltest du so eine einfache, übersichtliche und leicht zu wartende Lösung haben.

Geschrieben von: taraxacum 28.09.2010 - 15:20

Vielen Dank für die tolle Unterstützung.

Sorry, dass ich es versäumt habe, intensiver über die Positionierung zu lesen. Aber mit Hilfe Deiner Angaben, die ich nur ein wenig angepasst habe (vor allem darf div.ring kein left:0 haben, weil sonst die Zentrierung nicht mehr funktioniert), habe ich jetzt eine Seite, die mit FF, IE8, Safari und P5 (ich hoffe, dann auch mit IE7) funktioniert.

Ich musste dem Ordner jetzt leider einen Passwortschutz verpassen, weil meine Auftraggeberin wohl entsetzt darüber war, dass die Seiten in Suchmaschinen zu finden sind, obwohl sich die Seiten noch in der Testphase befinden und daher kein Link auf diese Seiten verweist (das habe ich bisher für unmöglich gehalten). Tut mir Leid, wenn die Seiten nun nicht mehr für das Forum zugänglich sind, aber eine andere Lösung fällt mir jetzt nicht ein.

Ein Frage noch von einer unerfahrenen Forumsteilnehmerin: was heißt TE ausgeschrieben?

Nochmal vielen Dank für die Hilfe. Ich habe eine Menge gelernt.

Geschrieben von: Thomas 28.09.2010 - 15:31

ZITAT(taraxacum @ 28.09.2010 - 16:20) *
Vielen Dank für die tolle Unterstützung.
Da nich für wink.gif.

ZITAT(taraxacum @ 28.09.2010 - 16:20) *
Ich musste dem Ordner jetzt leider einen Passwortschutz verpassen, weil meine Auftraggeberin wohl entsetzt darüber war, dass die Seiten in Suchmaschinen zu finden sind, obwohl sich die Seiten noch in der Testphase befinden und daher kein Link auf diese Seiten verweist (das habe ich bisher für unmöglich gehalten).
Naja, hier im Forum gibt/gab es einen Link, der reicht eventuell schon.

ZITAT(taraxacum @ 28.09.2010 - 16:20) *
Ein Frage noch von einer unerfahrenen Forumsteilnehmerin: was heißt TE ausgeschrieben?
Thread-Eröffner/-in.

Ich würde bei dem Bild oben rechts noch überlegen, ob es wirklich als animiertes Gif (Bilderfolge) erscheinen soll (und dadurch recht pixelig wirkt). Vielleicht besser ein einzelnes Bild als Jpeg oder doch eine Umwandlung in Gif, die etwas weniger pixelig ist. Wie auch immer: Viel Erfolg bei der Umsetzung. Schön, dass wir helfen konnten und danke für deine Rückmeldung.

Unterstützt von Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)