Zum Inhalt springen

Browserweiche für IE incl. HTC-File. Leider keinerlei Wirkung im IE

Erstellt am 29. Mai 2007 · 11 Antworten · letzte Antwort am 5. Juni 2007

Tags: JavaScript & AJAX, HTML & CSS, Frage

Tse ·

Hi all,

auf die Gafahr hin, dass ich mehr oder minder bekannte Themen wiederhole und dadurch manche von euch nerve (sorry im vorfeld, erste Recherche hat leider nicht wirklich was passendes gebracht), habe ich folgendes Problem:

Arbeite mit TYPO3 v4.1 und TemplaVoila v1.3.0

Im Footer der Seite, die gerade entsteht, muss ein rudimentäres Menü vorhanden sein, welches lediglich die Aufgabe hat, zu weiteren 4-5 externen Partnerseiten zu führen, die nichts mit der eigentlichen Seite zu tun haben. Die Verlinkungen führen jeweils zu Popup-Fenstern der jeweiligen externen Seiten, mehr ist in diesem Zusammenhang nicht notwendig.

Dieses habe ich als ein 2D-Ausklappmenü komplett in CSS realisiert nach dem Muster wie hier beschrieben: http://www.drweb.de/leseproben/klappmenu.shtml

Um dies alles dem IE schmackhaft zu machen, wird ein CSS-File und ein HTC-File eingebunden. Als Template lokal auf dem PC funzt das mit dem IE wunderbar, wenn auch mit leichten optischen Einbußen.

Fertig gemappt, funzt das ganze jedoch nur in FF, Opera und Safari, der IE ignoriert das ganze komplett mit der Folge, dass dort kein Menu angezeigt wird.
In TS sieht die Browserweiche bei mir folgendermaßen aus:

[browser = msie]&& [version =< 7.0] 
 page.includeCSS.file1 = fileadmin/templatefiles/erste.css
 page.includeCSS.file2 = fileadmin/templatefiles/horizontal_CSS2.css
 page.includeHTC.file3 = fileadmin/templatefiles/csshover.htc
[GLOBAL]

erste.css ist das File mit den CSS-Anweisungen für die Willkommensseite, horizontal_CSS2.css ist das Stylesheet des kleinen Menüs und dazu kommt noch das HTC-File wie oben beschrieben.

Kann mir bitte jemand verraten, welchen Fehler ich im TS-Code habe? Vielen herzlichen Dank im voraus!

just2b ·

Hallo und willkommen im Forum,

ein includeHTC gibts nicht, keine Ahnung woher du das hast!
binde das js mit

page.headerData.81 = TEXT
page.headerData.81.value = <script ......

ein

georg

Tse ·
just2b schrieb

ein includeHTC gibts nicht, keine Ahnung woher du das hast!
binde das js mit

page.headerData.81 = TEXT
page.headerData.81.value = <script ......

ein

Hallo,

den Link habe ich ja angegeben, voher ich das mit dem *.htc-File habe, bitte mal dort kurz reinschauen.

Das Menü worum es hier geht ist ein reines CSS-Menu und soll auch so bleiben (kein JS, wegen Usern, die das explizit ausschalten, bessere Suchmachinenfreundlichkeit und auch bessere Barrierefreiheit mit der CSS-Lösung).

Ist ein inkludieren auf Dateien nur auf bekannte wie *.css beschränkt? Wie kann ich das in TS abbilden, was im nicht gemappten Template auf dem PC auch unter IE gut funktioniert?

Diese Browserweiche macht dem IE keine Darstellunsgsprobleme im HTML-Template. Gemappt dagegen schon:

<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;}
}
</style>
<![endif]-->

Danke!

Tse

just2b ·

HTC ist javascript 😉

das htc file muss doch nur im gleichen Verzeichnis liegen wie das css-file, oder täusch ich mich.

georg

Tse ·
just2b schrieb

das htc file muss doch nur im gleichen Verzeichnis liegen wie das css-file, oder täusch ich mich.

georg

Hallo Georg,

an dieser Stelle erstmal 1000x Dank für deinen Einsatz!

Ja, alle Files, die CSS- und das HTC-File befinden sich im selben Verzeichnis, in meinem Fall ist es folgendes:
fileadmin/templatefiles/[hier dann alle relevanten Dateien]

Ein Pfadproblem liegt nicht vor.

Stehe unter Zeitdruck und weiss nicht, wie ich dieses Problem lösen soll. Aus dieser Perspektive ist für mich jeder Lösungsansatz goldwert!

Thx

Tse.

Tse ·

Hallo,

nach den Empfehlungen von Georg habe ich den TS-Code im Setup etwas umorganisiert, der sieht folgendermaßen aus:

###################################################
# Allgemeiner Bereich
###################################################

page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

page.meta.AUTHOR =  xxx
page.meta.KEYWORDS = xxx
page.meta.COPYRIGHT = xxx
page.meta.TITLE = xxx
page.meta.DESCRIPTION = xxx
page.meta.ROBOTS = follow
page.meta.REVISIT-AFTER = 3

[browser = msie] && [system = win] 
 page.includeCSS.file = fileadmin/templatefiles/horizontal_CSS2.css
[GLOBAL]

page.headerData.20 = TEXT
page.headerData.20.value = <script type="text/javascript" src="fileadmin/templatefiles/csshover.htc"></script>

page.includeCSS { 
  file1 = fileadmin/templatefiles/erste.css 
  file1.title = Standardansicht
  file1.media = screen
  
  file2 = fileadmin/templatefiles/erste_print.css 
  file2.title = Druckansicht
  file2.media = print
  

}

Auch hier leider das gleiche Problem: der IE ignoriert das eingebundene Menü als sei nix im Code drin, während FF, Opera und Safari alles ordnungsgemäß zeigen. #angry#

Ich bitte um zwei Sachen:

- Sind evtl. Fehler im obigen Code zu finden?
- Welche andere Möglichkeiten gibt es, dieses Menu dem IE unterzuschieben? Es wird doch möglich sein, auch den IE davon zu überzeugen, dass Aufklappmenü im Footer darzustellen.

Vielen Dank!

Tse (leicht gefrustet...)

just2b ·

Hallo,

ich weiß nicht, ob man das htc so einbinden kann, es wäre nur der ehest mögliche Weg gewesen. das htc ist ja auch nur ein javascript, von dem her würde ich das js direkt per page.headerData einbinden. Ich hab da mal einige Menüs zusammengestellt, eben auch mit dem js, weils beim IE nicht anders geht > http://www.just2b.com/mein-typo3/css-ts-menues.html

georg

Tse ·

Hallo,

danke für den Link deiner Seite. Die kam mir gleich bekannt vor (die witzige Ergänzung mit ge.org war mir damals schon aufgefallen) - dieses Mal habe ich sie gleich gebookmarkt. 🙂

Die Menüs sind natürlich sauber und funktionieren auch unter dem IE, wie die Beispiele das demonstrieren.

Allerdings ist dein Ansatz ein anderer. Du programmierst Menüs für die Seitennavigation, ich brauche nur ein an sich nicht so bedeutendes Minimalmenü, welches lediglich zu 4-5 Partnerseiten "nach außen" führt und durch die Verlinkungen lediglich ein paar PopUp-Fenster öffnet - mehr nicht! Mit der internen Navi der eigentlichen Seite hat dieses Menü nix zu tun... Ich hatte versucht das im ersten Posting klar zu beschreiben.

Es muss doch möglich sein, mit einer vernünftigen Browserweiche das ganze so hinzukriegen wie ich es vorgesehen habe, schließlich funktioniert alles auch im IE als Template auf dem Rechner. Nur in TYPO3 gemappt dann nicht mehr.

Bin sehr dankbar für weitere Anregungen / Tipps. Danke!

Tse.

Unbekannter Benutzer ·

na du kannst doch belieben Code über ein TEXT Element in den Header bringen...

Du brauchst du diese (oder eine ähnliche Angabe im Header oder?

 <!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(fileadmin/templatefiles/csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;}
}
</style>
 <![endif]-->

Du musst die htc Datei per behavior als Style zuweisen.... Anders wird die nicht eingebunden.

Also baust du das so in etwa in dein TS ein:

page.headerData.21 = TEXT
page.headerData.21.value(
 <!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(fileadmin/templatefiles/csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;}
}
</style>
 <![endif]-->
)

Und schon sollte das funktionieren, außer du hast was anderes falsch gemacht.

Grüße

Christian

Tse ·
Kitsunet schrieb

Und schon sollte das funktionieren, außer du hast was anderes falsch gemacht.

Hallo,

danke erstmal für die Tipps! Leider zeigen sie trotz alledem keine Wirkung.

Ich habe die Template-Files (insgesamt 2, einmal für die Willkommensseite, einmal für die Folgeseiten) vom conditional comment mit
<!--[if IE]> ... <![endif]--->
erstmal "befreit" und anschließend ein Template-Neumapping gemacht, so dass der Template-Zustand im BE auf "Up to date" angezeigt wird.
Alle anderen Browser können ja das Menü problemlos zeigen, daher war cond. comm. im header der jeweiligen html-Templates im Grunde überflüssig und wird jetzt wie du empfiehlst in TS ausgelagert.

Nun sieht mein TS folgendermaßen aus:

###################################################
# Allgemeiner Bereich
###################################################

page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

page.meta.AUTHOR = ...
page.meta.KEYWORDS = ...
page.meta.COPYRIGHT = ...
page.meta.TITLE = ...
page.meta.DESCRIPTION = ...
page.meta.ROBOTS = follow
page.meta.REVISIT-AFTER = 3


page.headerData.20 = TEXT
page.headerData.20.value (
 <!-- if lt IE 7]>
 <style type="text/css" media="screen">
 body {behavior: url(fileadmin/templatefiles/csshover.htc); font-size: 100%;}
 #menu ul li a {height: 1%;}
 }
 </style>
 <![endif]-->
) 

[browser = msie] && [system = win] 
 page.includeCSS.file = fileadmin/templatefiles/horizontal_CSS2.css
[GLOBAL]


page.includeCSS { 
  file1 = fileadmin/templatefiles/erste.css 
  file1.title = Standardansicht
  file1.media = screen
  
  file2 = fileadmin/templatefiles/erste_print.css 
  file2.title = Druckansicht
  file2.media = print
}

horizontal_CSS2.css ist das eigentliche css-File des keinen Menus. Auch eine geänderte Reihenfolge von
[browser = msie] && [system = win]
einmal vor dem Bereich page.headerData.20 = TEXT und einmal danach (so wie es aktuell ist), zeigen keine Wirkung.

Auch wenn dieses Posting zu lang wird, füge ich hier wegen der besseren Nachvollziehbarkeit den Quelltext des Headers ein, wie er im Browser gerendert erscheint:

<!DOCTYPE html
	PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- 
	This website is powered by TYPO3 - inspiring people to share!
	TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
	TYPO3 is copyright 1998-2006 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
	Information and contribution at http://typo3.com/ and http://typo3.org/
-->

	<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_1e9067b02b.css" />
	<link rel="stylesheet" type="text/css" href="fileadmin/templatefiles/horizontal_CSS2.css" />
	<link rel="stylesheet" type="text/css" href="fileadmin/templatefiles/erste.css" title="Standardansicht" media="screen" />
	<link rel="stylesheet" type="text/css" href="fileadmin/templatefiles/erste_print.css" title="Druckansicht" media="print" />
 <!-- if lt IE 7]>
 <style type="text/css" media="screen">
 body {behavior: url(fileadmin/templatefiles/csshover.htc); font-size: 100%;}
 #menu ul li a {height: 1%;}
 }
 </style>
 <![endif]-->
<link rel="schema.dc" href="http://purl.org/metadata/dublin_core_elements" />

	<title>Home</title>
	<meta name="generator" content="TYPO3 4.1 CMS" />
	<meta name="AUTHOR" content=" ... " />
	<meta name="KEYWORDS" content=" ... " />
	<meta name="COPYRIGHT" content="..." />
	<meta name="TITLE" content="..." />
	<meta name="DESCRIPTION" content="..." />
	<meta name="ROBOTS" content="follow" />
	<meta name="REVISIT-AFTER" content="3" />
	<script type="text/javascript" src="typo3temp/javascript_757c080409.js"></script>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<link href="fileadmin/templatefiles/erste.css" rel="stylesheet" type="text/css" media="all" />

<link href="fileadmin/templatefiles/horizontal_CSS2.css" rel="stylesheet" type="text/css" media="all" />

<link href="fileadmin/templatefiles/erste_print.css" rel="stylesheet" type="text/css" media="print" />

<link rel="shortcut icon" type="image/x-icon" href="fileadmin/templatefiles/fav.ico" />

</head>

Dort ist deutlich zu sehen, dass der cond. comment, der über TS eingebunden ist (Zeile 18 - 24), sehr wohl im Header erscheint, nur die Wirkung bleibt leider komplett aus... Als hätte man nichts geändert, der IE ignoriert beharrlich das Menu, während die anderen Browser brav alles anzeigen.

Ich bin ziemlich am Ende mit meinem Latein, ich weiss nicht weiter... o.O

Danke schön für weitere Mühen und Tipps!

Tse

Unbekannter Benutzer ·

dann würde ich doch gerne das Template + CSS sehen. Sonst würde ich im Moment auch sagen benutz die Methode von Georg. Die ist auch eleganter...

Tse ·

Hallo,

dieses recht hartnäckige Problem mit der Darstellung beim IE6 und IE7 kann jetzt als gelöst betrachtet werden.

Die vorgeschagene Lösung von Georg war sicherlich funktionell, unter den gegebenen Umständen jedoch etwas oversized. Denn es ging nicht um ein Menu für die Seite selbst, sondern lediglich um eine Weitereitung nach "Außen" - es öffnen sich nur ein paar Popup-Fenster zu irgendwelchen Partnerseiten, mehr war da nicht gefordert.
An dieser Stelle vielen Dank an Georg, auch für die sehr gelungenen Menüs auf seiner Seite, die jedem von uns eine gute Orientierung sein können.

Besonderer Dank gebührt Kitsunet für seinen hervorragenden Support und für seine Geduld!

Ich denke vielen hier im Forum geht es wie mir: man hat ein hartnäckiges Problem und man sieht den Wald vor lauter Bäumen nicht mehr, einen Termin den man einhalten muss sowie Chefs, die von technischen Schwierigkeiten nichts verstehen oder auch nichts verstehen wollen - eine explosive Mischung...
In solchen Foren wie diesem wird jede auch so kleine Hilfe gebraucht und solche Teilnehmer wie Kitsunet sind wirklich goldwert, ohne jetzt weitere Lobeshymnen dichten zu wollen. ;-)

Nun die Lösungsansätze in allerkürze.

Zum einen lag es an der verkehrten Doctype-Deklaration. Mit folgendem Code

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

war zwar der IE nicht im Quirks-Modus (habe das mit ein paar js-Codezeilen getestet) wie hier beschrieben:

<script type="text/javascript">
alert(document.compatMode);
</script>

dennoch ignorierte er hartnäckig die im TS einbebundene Browserweiche. Folgende Doctype-Deklaration hat dann die Lösung gebracht:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ich hatte den Doctype schon länger latent im Verdacht, habe aber an anderen Stellen versucht, den Fehler zu fidnen. Anschließend waren etliche CSS-Anpassungen nötig sowie ein Zusammenführen von ursprünglich zwei getrennten CSS-Files da der IE (besonders der 6-er) immer noch Darstellungsprobleme hatte, was bei FF, Opera und Safari sofort klappte.

Anschließend sieht mein TS-Code (Auszug) so aus, womit es jetzt endlich auch klappt:

###################################################
# Allgemeiner Bereich
###################################################

page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

page.config.doctype = <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

page.meta.AUTHOR = ...
page.meta.KEYWORDS = ...
page.meta.COPYRIGHT = (c) ...
page.meta.TITLE = ...
page.meta.DESCRIPTION = ...
page.meta.ROBOTS = follow
page.meta.REVISIT-AFTER = 7

config.noPageTitle = 2
page.headerData.5 = TEXT
page.headerData.5.field = subtitle // title
page.headerData.5.wrap = <title>Firmenname: &nbsp; |</title>

     
page.headerData.20 = TEXT
page.headerData.20.value (
 <!-- if lt IE 7]>
 <style type="text/css" media="screen">
 body {behavior: url(fileadmin/templatefiles/csshover.htc); font-size: 100%;}
 #menu ul li a {height: 1%;}
 }
 </style>
 <![endif]-->
) 

[browser = msie] && [system = win] 
 page.includeCSS.file = fileadmin/templatefiles/erste.css
[GLOBAL]


page.includeCSS { 
  file1 = fileadmin/templatefiles/erste.css 
  file1.title = Standardansicht
  file1.media = screen
  
  file2 = fileadmin/templatefiles/erste_print.css 
  file2.title = Druckansicht
  file2.media = print
}

Nochmal vielen Dank und Grüße aus Berlin,

Tse