zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Workaround für :target im IE

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.07.2011, 14:05
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard Workaround für :target im IE

Hallo

Ich möchte Aufklapptexte ohne JavaScript erstellen.
Hierzu bediene ich mich der Technik der CSS-Popups.
(bitte JS deaktivieren wg Schrottwerbung)

CSS-PopUp bei MouseOver und Klick

Das klappt soweit im Firefox,
im IE ist es auch einigermaßen akzeptabel,
nur bei Safari und Chrome wird der Aufklapptext nur solange gehalten, wie man die Maustaste über dem Link gedrückt hält, bzw über dem Link hovert.

Mit :target bekommt man das nun in den Griff, mit Ausnahme des IE:

:target für alle Nicht-IEs

Mein Problem ist nun das Zusammenführen beider Varianten.

Hier ist mein Versuch:

Aufklapp für alle

Es würde auch im IE funktionieren, wenn ich für den IE die IDs (aufklapp-1, aufklapp-2, ...) im SPAN-Element unsichtbar bachen könnte.
Dazu wollte ich die Conditional-Comments für Nicht-IEs benutzen, die grundsätzlich auch funktionieren, wie man an dem Text "Wir sind die guten Browser !" sehen kann, der im IE nicht angezeigt wird.

Versuchsweise habe ich nun die ID 'aufklapp-3' im Frankreich-Link mit diesen CCs umschlossen.
Erwartungsgemäß funktioniert das Aufklappen bei diesem Link in allen guten Browsern immer noch, aber der Sch...IE scheint diese ID, die nicht für ihn bestimmt ist, doch irgendwie zu lesen, und behält den Klapptext nicht offen.
(Bei den ersten beiden Links (die im IE funktionieren), habe ich absichtlich die IDs im SPAN weggelassen, um zu zeigen, daß es nur an der ID liegt, die der IE nicht lesen darf, es aber trotzdem tut).

Hat einer von Euch noch eine Idee hierzu, oder evtl einen anderen browserübergreifenden Ansatz ohne JavaScript?


Grüße
Gaby
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.07.2011, 15:09
$("#mettbröttchen");
XHTMLforum-Mitglied
 
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard

Mit Conditional Comments bindest du dein IE-Stylesheet ein, falls du Werte anders setzten bzw. überschreiben musst, arbeitest du mit !important.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.07.2011, 16:21
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von zeji Beitrag anzeigen
Mit Conditional Comments bindest du dein IE-Stylesheet ein, falls du Werte anders setzten bzw. überschreiben musst, arbeitest du mit !important.
schon klar, CCs sind die sauberere Lösung.
Ich habe zum Testen mal schnell den Backslash-Hack eingesetzt. Wenn du meine erste Datei aufrufst, kannst du sehen, daß es funktioniert:
Der IE zeigt einen blauen Rahmen um den Klapptext, alle übrigen Browser einen roten.

Aber das ist ja nicht das Problem, sondern:

Zitat:
Es würde auch im IE funktionieren, wenn ich für den IE die IDs (aufklapp-1, aufklapp-2, ...) im SPAN-Element unsichtbar bachen könnte.
Es muß also im Quellcode etwas für den IE ausgeblendet werden.

Aufklapp für alle , CCs für alle Nicht-IEs:
hier funktioniert das Verstecken vor dem IE:
<!--[if !IE]><!-->Wir sind die guten Browser !<!--<![endif]-->

aber hier nicht:
Zitat:
Versuchsweise habe ich nun die ID 'aufklapp-3' im Frankreich-Link mit diesen CCs umschlossen.
<span <!--[if !IE]><!-->id="aufklapp-3"<!--<![endif]--> class="showcase">Maison vacances en Sicile</span>

'id="aufklapp-3"'im Markup soll also nur von allen Nicht-IEs gelesen werden können.

-------

Ich bin aber natürlich nicht auf diese Methode festgelegt, falls jemand noch einen anderen Ansatz hätte, wäre ich dankbar.
Mit Zitat antworten
  #4 (permalink)  
Alt 07.07.2011, 16:34
$("#mettbröttchen");
XHTMLforum-Mitglied
 
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard

Naja das ganze Geplänkel könnte man auch über eine Browserweiche über php oder Javascript realisieren.
Mit Zitat antworten
  #5 (permalink)  
Alt 07.07.2011, 16:37
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

warum blendest du id="aufklapp-3 nicht per CC für die IE's aus?
Du kannst dort das Element doch per pos. absolute und left:-9999px; rausschieben.
Oder hab ich da was falsch verstanden?
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #6 (permalink)  
Alt 07.07.2011, 17:18
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von hubspe Beitrag anzeigen
Hi,

warum blendest du id="aufklapp-3 nicht per CC für die IE's aus?
Ja, das will ich ja.
("ausblenden" im Sinn von "verstecken", "nicht lesbar machen")
Wie würdest du das denn mit CCs für die IEs ausblenden?

die "Zeichenfolge" 'id="aufklapp-n" im Markup soll also von IEs nicht gelesen werden dürfen.

IMO sollte dies hier seinen Dienst tun:
<!--[if !IE]><!--> id="aufklapp-n" <!--<![endif]-->
Tut es aber nicht.



Zitat:
Du kannst dort das Element doch per pos. absolute und left:-9999px; rausschieben.
Oder hab ich da was falsch verstanden?
Ja.
Ich will das Element ja nicht ausblenden, sondern nur die Ankernamen "aufklapp-n" für die IEs verstecken.

Uuups, ich merke gerade, daß ich im falschen Forum poste.
Das ist ja eigentlich ein HTML-Problem.
sorry für die Verwirrung.

Geändert von gaby (07.07.2011 um 17:21 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 07.07.2011, 23:39
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Ich habe jetzt nochmal eine ganz einfache Testdatei erstellt:

Zitat:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<title>Aufklapp für alle</title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

.blau {
background-color: lightblue; }

.gruen {
background-color: lime; }

.gelb {
background-color: yellow; }

</style>

</head>

<body >

<!--[if !IE]><!-->Die folgende Zeile sollte nur von allen Nicht-IEs angezeigt werden.
<h3>Wir sind die guten Browser !</h3> <!--<![endif]-->

<br>
<br>

<p class="blau">1. Lorem Ipsum</p>

<p <!--[if IE]> class="gelb" <![endif]--> > 2. Lorem Ipsum</p>

<p <!--[if !IE]><!--> class="gruen" <!--<![endif]--> > 3. Lorem Ipsum</p>

</body>

</html>
Das 2. "Lorem Ipsum" sollte für die IEs die Klasse "gelb erhalten, und somit einen gelben Hintergrund haben.

Das 3. "Lorem Ipsum" sollte für alle Nicht-IEs die Klasse "gruen erhalten, und somit einen grünen Hintergrund haben.

Aber anscheinend verschlucken sich die Browser an dem öffnenden tag der CCs, weil sie nach dem "<p" als nächstes ein schließendes tag erwarten.

Seht ihr sonst noch eine Möglichkeit, nur den guten Browsern für ein Element einen Klassennamen zu verpassen, oder, um auf mein eigentliches Thema zurückzukommen, ein IE-Workaround für die CSS3-Pseudoklasse :target"?

Grüße
gaby
Mit Zitat antworten
  #8 (permalink)  
Alt 07.07.2011, 23:44
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von gaby Beitrag anzeigen
Aber anscheinend verschlucken sich die Browser an dem öffnenden tag der CCs, weil sie nach dem "<p" als nächstes ein schließendes tag erwarten.
<p ist fehlerhafter Code, das sollte dir doch ins Auge fallen. Schreibe <p>. Die schließende Spitzklammer später im Text ist demnach auch überflüssig.

Zitat:
Zitat von gaby Beitrag anzeigen
Seht ihr sonst noch eine Möglichkeit, nur den guten Browsern für ein Element einen Klassennamen zu verpassen, oder, um auf mein eigentliches Thema zurückzukommen, ein IE-Workaround für die CSS3-Pseudoklasse :target"?
Mit Skripten?
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
  #9 (permalink)  
Alt 08.07.2011, 01:33
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von gato Beitrag anzeigen
<p ist fehlerhafter Code, das sollte dir doch ins Auge fallen.
Es wird fehlerhaft dargestellt. Das habe ich auch gesehen.

Zitat:
Schreibe <p>. Die schließende Spitzklammer später im Text ist demnach auch überflüssig.
Du meinst also so?
<p> <!--[if IE]> class="gelb" <![endif]--> 2. Lorem Ipsum</p>

Dann würde der IE das 'class="gelb"' als Text innerhalb des P-tags lesen, was natürlich ebenfalls nicht zum gewünschten Ergebnis führen würde.



Zitat:
Mit Skripten?
nicht mit einem JavaScript, da es sich ja ursprünglich um Aufklapptexte handelt, die bei deaktiviertem JS dann nicht mehr gelesen werden könnten.

Grüße und Danke für deine Antwort
gaby
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.07.2011, 09:27
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

sollte das so sein:
PHP-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" 
>
<
html>
<
head>
<
title>Aufklapp für alle</title>
<
META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<
style type="text/css">

.
blau {
background-colorlightblue; }
</
style>

<!--[if 
lte IE 9]>
  <
style type="text/css">
  
h3 {
      
position:absolute;
      
left:-9999px;
  }
  .
gelb background:yellow; }
  .
gruen background:lime; }
  </
style>
<![endif]--> 

</
head>
<
body >

<
h3>Wir sind die guten Browser !</h3
<
br>
<
br>
<
class="blau">1. Lorem Ipsum</p>
<
class="gelb"2. Lorem Ipsum</p>
<
class="gruen" 3. Lorem Ipsum</p>

</
body>
</
html
h3 wird nur von den guten Browsern angezeigt und die Klassen .gelb und .gruen werden nur für die IE's gestaltet.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
caa target auch im IE?! dkabilka CSS 3 16.03.2010 10:59
Workaround für IE Direkt im CSS-Code??? therug CSS 2 03.11.2008 09:32
Form und Target xm22 (X)HTML 1 20.03.2007 14:48
position:fixed IE Workaround osterhas CSS 2 03.03.2007 14:02
Barriernfreiheit Target michael-r CSS 13 08.02.2007 16:06


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:22 Uhr.