[Erledigt] Navigation kompatibel machen für IE7/8

prestige · 21.04.2009, 21:01

Hallo zusammen

War schon eine Weile nicht mehr hier.
Ich habe mich seit damals viel weitergebildet.

Auf meiner Homepage (Compinfo-Startseite) , ist im Aufbau, habe ich Probleme mit der Darstellung der Navigation im IE. Mit Firefox funzt die Navi ohne Probleme.
Die Seite basiert auf CSS. Mein Ziel ist es, dass die Seite mit FF und mit IE möglichst gleich aussieht.
Ich habe mir die CSS auch validieren lassen von WC3.

Um nun zur Frage zu kommen:

Kann mir jemand sagen, wieso die Navigation im IE so "falsch bzw. nur teilweise korrekt" interpretiert wird?

Wie es aussehen müsste:
Oberpunkte (mit Hintergrundgrafik) lassen sich auf- und zuklappen bei mouseover. Dann sind die unteren listenpunkte sichtbar (silberner Hintergrund).

Die Unteren Listenpunkte sollten genau gleich breit und schön anschliessend an den Oberpunkten ausgerichtet sein. Die Höhe ist je nach Oberpunkt variabel.

Wie es im IE aussieht:
Unterpunkte sind nach links verschoben und haben den gleichen Hintergrund wie die Oberpunkte - statt silber.

Hier findet ihr die CSS:
W3C CSS Validator results for http://www.compinfo.pytalhost.com/ (CSS level 2)

Könnt Ihr mir helfen? Ich weiss nicht, woran das liegt.

Mfg danke im voraus.

dille001 · 24.04.2009, 00:15

Moin,

der IE kennt die pseudo-Klassen wie hover für nicht-Link-Elemente erst ab 4.01

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">

Wenn Du das bei Dir austauschst, wirst Du bemerken, dass das Ergebnis recht flatterhaft wirkt: Mal reagiert das ganze wie gewünscht mal klappt sich das Submenü ein, wenn Du es anwählen willst.
Veranwortlich dafür sind die Positionsangaben im ul#nav li ul, da der IE erst Ereignisse (hover) verarbeitet, dann fürs Rendern noch einmal dynamisch wird (die Positionsangeben verarbeiten) und dabei dann das hover verliert.
Lass die top:25px left:-1px einfach weg.
Das ganze wird trotzdem korrekt gerendert, weil (s. w3c) "with reference to its containing box" angezeigt wird.

Dirk

PS: Ach ja, versuche am besten, css-Eigenschaften, die ohnehin vererbt werden, bei den Erben nicht zu wiederholen, erst recht nicht, wenn die den display-Modus wechseln, da reagiert der IE mitunter auch recht komisch

prestige · 24.04.2009, 10:25

Hi,

Vielen Dank für deine Hilfe! Ich habe es mit dem Doctype versucht, den du mir geschrieben hast:

Es funzt jetzt bei beiden Explorern also FF und IE. Aber die Navigation ist jetzt verschoben nach links - war vorher beim FF nicht der Fall.

Ausserdem mekert der W3C validator noch ein wenig:
[Invalid] Markup Validation of http://compinfo.pytalhost.com/ - W3C Markup Validator

Das mit dem "Attribute weglassen" die sowieso vererbt werden, nehme ich noch in angriff.

EDIT: Hab das mit der Navigation hinbekommen. Jetzt wäre nur noch das Problem mit dem WC3 standard.
Wo wir schon bei CSS sind. Weiss jemand, wie ich im IE den iframe-hintergrund transparent hinbekommen kann?

Mfg und nochmals vielen Dank.

dille001 · 28.04.2009, 09:37

Sorry 4 delay, war ein paar Tage offline

Also, der Validator hat mit Strict so seine Eigentümlichkeiten - bestimmt arbeitet er korrekt ich hab nur noch nie herausgefunden, was (muss was im Header sein) zu den komischen Fehlermeldungen führt.
@Mitleser: Validator sagt ""TARGET" is not a valid attribute, did you mean "target"" obwohl der Quelltext "target" klein schreibt und Anführungsstriche etc. korrekt sind.

@habbohighs: Mit Transitional wird ein valider Schuh draus.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Zum iframe musste ich kürzlich selbst erst lernen, dass der IE das Attribut background komplett ignoriert. Mit dem Iframe selbst ist also nix zu machen. ABER: Du kannst den Iframe in ein DIV packen, dem Du via opacity etc. Transparenz verleihst. Das gilt dann allerdings nicht nur für den Hintergrund

Dirk

prestige · 28.04.2009, 13:08

Hi, vielen Dank für deine Message - lieber mit delay als nie ^^.
Der Doctype ist clean.

Zum iframe:
Dieser IE ist (meiner Meinung nach - und im Vergleich zu anderen Browsern) einfach nur schrott!

Dann gibts net mal gescheite Einstellungen die man vornehmen könnte um auf Umwegen zum Ziel zu gelangen :S.
Ich habe gegooglet. Ich habe, zu deinem Beispiel dazu noch folgendes gefunden:

<iframe allowTransparency="true" style="background-color:transparent;" ...></iframe>

Der Witz ist, dass nichts von dem funzt

Dh. deines Funzt schon, aber der Nebeneffekt ist nicht gerade dass, was ich brauche.

Weiss jemand evt. wie man das sonst noch lösen könnte?

EDIT:
Habe noch ein paar neue Probleme, leider

1. Kannst du mal meine Navi unter die Lupe nehmen? Irgendwas bei der Positionierung stimmt da nicht mit den ul#nav li ul li (sprich: bei den Unterpunkten) beim IE nicht. Sie sind verschoben.

2. Wenn ich die Seite neu lade, passiert es manchmal, dass die einzelnen News (iframe - news.html) doppelt angezeigt werden. Wieso denn das?

3. Unterhalb der Navi befindet sich die DIV "empty" diese geht vom unteren Rand der Navi-Oberpunkte bis zum Ende Anfang der News und Titel bar (Hintergr:schwarz Schrift:weiss). Die Höhe ist eigentlich gleich der Höhe der ul mit den meisten li (Unterpunkte).

Der Übergang sieht bei 100% okay aus, wenn man zoomt siehst du, dass die Höhe bzw. der Übergang zwischen empty und der News und Titel bar nicht schön anschliessen.

Kann man das irgendwie noch schöner hinkriegen?

Mfg

prestige · 01.05.2009, 10:01

Sry, für Doppelpost - aber ich konnte meien Beitrag nicht mehr ändern - ist das eigentlich immer so?

Ich habe das <iframe> durch include_once("news.html") ersetzt. Hab alles gleich wie beim <iframe> nur, dass ich es besser formatieren kann und es in allen Browsern (bei FF und IE zumindest) richtig angezeigt wird/werden sollte.

Der Rest hat sich durch mühsames Ausprobieren gelöst.

Vielen Danke, Dille001 für deine Hilfe.

Mfg

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Scriptangebot Funktion zum generieren von Navigation	Felk	Scriptbörse	1	04.04.2009 02:03
[Erledigt] Hierarchische Navigation	Dunkelord	Datenbanken	5	12.01.2009 18:31
[Erledigt] Navigation mit Active-Link	Rezeptfrei	PHP Tipps 2008	5	26.11.2008 13:45
Problem mit PHP Navigation	hagene	PHP Tipps 2008	4	09.10.2008 23:33
Kontaktformular mit Spamschutz und include Navigation?	chicco4u	PHP Tipps 2008	1	11.08.2008 09:52
Navigation fixen	Desert	PHP Tipps 2008	0	12.05.2008 17:00
Probs mit Layout für Navigation mit Grafiken/Hintergrund		HTML, Usability und Barrierefreiheit	3	08.02.2006 19:56
Navigation	snatch-ic	PHP Tipps 2007	4	08.01.2006 12:11
Navigation		PHP Tipps 2007	17	04.11.2005 20:07
Probleme mit der Navigation	Pimbolie1979	HTML, Usability und Barrierefreiheit	3	19.05.2005 15:45
Navigation mittels PHP anpassen		PHP Tipps 2005	8	27.04.2005 14:35
Navigation		PHP Tipps 2005	18	11.04.2005 16:16
Navigation	tikal	PHP Tipps 2004-2	3	03.12.2004 15:28
Mit Templates Navigation erstellen? (welches Templatesyste?)	zwelch	PHP Tipps 2004-2	5	18.11.2004 15:14
[Erledigt] PHP Navigation => Function aufrufen und Navigation ausgeb		PHP Tipps 2004	6	14.10.2004 16:46

21.04.2009, 21:01
prestige Benutzer Registriert seit: 11.05.2008 Beiträge: 71 PHP-Kenntnisse: Fortgeschritten	[Erledigt] Navigation kompatibel machen für IE7/8 Hallo zusammen War schon eine Weile nicht mehr hier. Ich habe mich seit damals viel weitergebildet. Auf meiner Homepage (Compinfo-Startseite) , ist im Aufbau, habe ich Probleme mit der Darstellung der Navigation im IE. Mit Firefox funzt die Navi ohne Probleme. Die Seite basiert auf CSS. Mein Ziel ist es, dass die Seite mit FF und mit IE möglichst gleich aussieht. Ich habe mir die CSS auch validieren lassen von WC3. Um nun zur Frage zu kommen: Kann mir jemand sagen, wieso die Navigation im IE so "falsch bzw. nur teilweise korrekt" interpretiert wird? Wie es aussehen müsste: Oberpunkte (mit Hintergrundgrafik) lassen sich auf- und zuklappen bei mouseover. Dann sind die unteren listenpunkte sichtbar (silberner Hintergrund). Die Unteren Listenpunkte sollten genau gleich breit und schön anschliessend an den Oberpunkten ausgerichtet sein. Die Höhe ist je nach Oberpunkt variabel. Wie es im IE aussieht: Unterpunkte sind nach links verschoben und haben den gleichen Hintergrund wie die Oberpunkte - statt silber. Hier findet ihr die CSS: W3C CSS Validator results for http://www.compinfo.pytalhost.com/ (CSS level 2) Könnt Ihr mir helfen? Ich weiss nicht, woran das liegt. Mfg danke im voraus.


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

24.04.2009, 00:15
dille001 Benutzer Registriert seit: 28.02.2009 Beiträge: 58	HTML-Versionsangabe wichtig! Moin, der IE kennt die pseudo-Klassen wie hover für nicht-Link-Elemente erst ab 4.01 Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd"> Wenn Du das bei Dir austauschst, wirst Du bemerken, dass das Ergebnis recht flatterhaft wirkt: Mal reagiert das ganze wie gewünscht mal klappt sich das Submenü ein, wenn Du es anwählen willst. Veranwortlich dafür sind die Positionsangaben im ul#nav li ul, da der IE erst Ereignisse (hover) verarbeitet, dann fürs Rendern noch einmal dynamisch wird (die Positionsangeben verarbeiten) und dabei dann das hover verliert. Lass die top:25px left:-1px einfach weg. Das ganze wird trotzdem korrekt gerendert, weil (s. w3c) "with reference to its containing box" angezeigt wird. Dirk PS: Ach ja, versuche am besten, css-Eigenschaften, die ohnehin vererbt werden, bei den Erben nicht zu wiederholen, erst recht nicht, wenn die den display-Modus wechseln, da reagiert der IE mitunter auch recht komisch

24.04.2009, 10:25
prestige Benutzer Registriert seit: 11.05.2008 Beiträge: 71 PHP-Kenntnisse: Fortgeschritten	Hi, Vielen Dank für deine Hilfe! Ich habe es mit dem Doctype versucht, den du mir geschrieben hast: Es funzt jetzt bei beiden Explorern also FF und IE. Aber die Navigation ist jetzt verschoben nach links - war vorher beim FF nicht der Fall. Ausserdem mekert der W3C validator noch ein wenig: [Invalid] Markup Validation of http://compinfo.pytalhost.com/ - W3C Markup Validator Das mit dem "Attribute weglassen" die sowieso vererbt werden, nehme ich noch in angriff. EDIT: Hab das mit der Navigation hinbekommen. Jetzt wäre nur noch das Problem mit dem WC3 standard. Wo wir schon bei CSS sind. Weiss jemand, wie ich im IE den iframe-hintergrund transparent hinbekommen kann? Mfg und nochmals vielen Dank. __________________ Genau das wollte ich auch gerade sagen ^^ Geändert von prestige (24.04.2009 um 19:39 Uhr).

28.04.2009, 09:37
dille001 Benutzer Registriert seit: 28.02.2009 Beiträge: 58	Sorry 4 delay, war ein paar Tage offline Also, der Validator hat mit Strict so seine Eigentümlichkeiten - bestimmt arbeitet er korrekt ich hab nur noch nie herausgefunden, was (muss was im Header sein) zu den komischen Fehlermeldungen führt. @Mitleser: Validator sagt ""TARGET" is not a valid attribute, did you mean "target"" obwohl der Quelltext "target" klein schreibt und Anführungsstriche etc. korrekt sind. @habbohighs: Mit Transitional wird ein valider Schuh draus. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Zum iframe musste ich kürzlich selbst erst lernen, dass der IE das Attribut background komplett ignoriert. Mit dem Iframe selbst ist also nix zu machen. ABER: Du kannst den Iframe in ein DIV packen, dem Du via opacity etc. Transparenz verleihst. Das gilt dann allerdings nicht nur für den Hintergrund Dirk

28.04.2009, 13:08
prestige Benutzer Registriert seit: 11.05.2008 Beiträge: 71 PHP-Kenntnisse: Fortgeschritten	Hi, vielen Dank für deine Message - lieber mit delay als nie ^^. Der Doctype ist clean. Zum iframe: Dieser IE ist (meiner Meinung nach - und im Vergleich zu anderen Browsern) einfach nur schrott! Dann gibts net mal gescheite Einstellungen die man vornehmen könnte um auf Umwegen zum Ziel zu gelangen :S. Ich habe gegooglet. Ich habe, zu deinem Beispiel dazu noch folgendes gefunden: <iframe allowTransparency="true" style="background-color:transparent;" ...></iframe> Der Witz ist, dass nichts von dem funzt Dh. deines Funzt schon, aber der Nebeneffekt ist nicht gerade dass, was ich brauche. Weiss jemand evt. wie man das sonst noch lösen könnte? EDIT: Habe noch ein paar neue Probleme, leider 1. Kannst du mal meine Navi unter die Lupe nehmen? Irgendwas bei der Positionierung stimmt da nicht mit den ul#nav li ul li (sprich: bei den Unterpunkten) beim IE nicht. Sie sind verschoben. 2. Wenn ich die Seite neu lade, passiert es manchmal, dass die einzelnen News (iframe - news.html) doppelt angezeigt werden. Wieso denn das? 3. Unterhalb der Navi befindet sich die DIV "empty" diese geht vom unteren Rand der Navi-Oberpunkte bis zum Ende Anfang der News und Titel bar (Hintergr:schwarz Schrift:weiss). Die Höhe ist eigentlich gleich der Höhe der ul mit den meisten li (Unterpunkte). Der Übergang sieht bei 100% okay aus, wenn man zoomt siehst du, dass die Höhe bzw. der Übergang zwischen empty und der News und Titel bar nicht schön anschliessen. Kann man das irgendwie noch schöner hinkriegen? Mfg __________________ Genau das wollte ich auch gerade sagen ^^ Geändert von prestige (29.04.2009 um 09:23 Uhr).

01.05.2009, 10:01
prestige Benutzer Registriert seit: 11.05.2008 Beiträge: 71 PHP-Kenntnisse: Fortgeschritten	Sry, für Doppelpost - aber ich konnte meien Beitrag nicht mehr ändern - ist das eigentlich immer so? Ich habe das <iframe> durch include_once("news.html") ersetzt. Hab alles gleich wie beim <iframe> nur, dass ich es besser formatieren kann und es in allen Browsern (bei FF und IE zumindest) richtig angezeigt wird/werden sollte. Der Rest hat sich durch mühsames Ausprobieren gelöst. Vielen Danke, Dille001 für deine Hilfe. Mfg __________________ Genau das wollte ich auch gerade sagen ^^