kami-katze
Apr 26, 2010
view6660
view9
0
Goto Top

Pseudoelemente after und before - content im IE8

GermansolvedQuestionCSSDevelopment
Hi Leute,

ich habe folgenden Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
	<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
	<title>Testbutton</title>
		<style type="text/css">  
			body
				{
				margin:0px;
				padding:0px;
				}
			#dummy
				{
				position:absolute;
				width:100%;
				height:100%;
				}
			.button
				{
				margin: 30px;
				position:relative;
				border:1px black solid;
				height:30px;
				float:left;
				cursor:pointer;
				}
			.button:before
				{
				content:"Test.";  
				}
			.button:after
				{
				content:".Test";  
				}
		</style>
	</head>
	<body>
		<div id="dummy">  
			<div class="button">  
				1
			</div>
			<div class="button">  
				2
			</div>
			<div class="button">  
				3
			</div>
		</div>
	</body>
</html>

Dieser wird mir korrekt Angezeigt wenn die HTM Datei lokal auf der Festplatte liegt.
Schiebe ich die Datei allerdings auf einen Webserver oder eine Serverfreigabe ignoriert der IE8 scheinbar die before und after Formatierungen bzw. das content Atribut. Kann sich jemand dieses verhalten erklären?

Grüße kami
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 141495

Url: https://administrator.de/contentid/141495

Printed on: April 24, 2024 at 04:04 o'clock

9 Comments
Latest comment
Goto Top
Member: ChrFriedel
ChrFriedel Apr 26, 2010 at 14:52:42 (UTC)
Goto Top
Hallo,

erklären kann ich es nicht. Aber bestätigen.
Und erwähnen das der Firefox und der Opera es beide korrekt darstellen.

vermutlich ein Bug

grüße
Member: Snowman25
Snowman25 Apr 26, 2010 at 15:01:13 (UTC)
Goto Top
IE7 unterstützt weder :before noch :after. Der IE8 in Version b1 akzeptiert als content keine Bilder.
Siehe hier:
http://www.quirksmode.org/css/beforeafter.html

Möglicher Workaround am Ende der Seite (Englisch):
http://www.howtocreate.co.uk/wrongWithIE/?chapter=%3Abefore+and+%3Aafte ...

Gruß
Snow
Member: ChrFriedel
ChrFriedel Apr 26, 2010 at 15:22:59 (UTC)
Goto Top
Zitat von @Snowman25:
IE7 unterstützt weder :before noch :after. Der IE8 in Version b1 akzeptiert als content keine Bilder.
Siehe hier:
http://www.quirksmode.org/css/beforeafter.html

Naja der IE8 stellt ja die Before und After Elemente richtig dar... aber eben seltsamerweise nur wenn die Datei nicht auf einem Netzlaufwerk sondern lokal gespeichert ist...
Deswegen vermute ich mal der Workaround wird nicht helfen. Aber probieren schadet ja nicht face-smile

grüße
Member: kami-kaTze
kami-kaTze Apr 26, 2010 at 16:22:15 (UTC)
Goto Top
Ist nur kurios das er lokal sogar Bilder richtig darstellt. Ich hatte vor ein Button zu kreieren welcher eine Variabele länge hat. Anfang und Ende sollte allerdings abgerundet sein. So habe ich drei Bilder button_left, button_center und button_right.
Lokal funktioniert sogar das hovern richtig... (alle drei bilder werden verändert)
Naja zur Not bleibt ja noch javascript mit drei divs die ich alle via mouseover veränder... ist aber sehr unschön...

Vieleicht hat ja noch jemand nen Tipp warum der IE lokale Dokumente anders behandelt als welche im Netz...
Member: Snowman25
Snowman25 Apr 27, 2010 at 08:08:18 (UTC)
Goto Top
Zitat von @kami-kaTze:
Ist nur kurios das er lokal sogar Bilder richtig darstellt. Ich hatte vor ein Button zu kreieren welcher eine Variabele länge
hat. Anfang und Ende sollte allerdings abgerundet sein. So habe ich drei Bilder button_left, button_center und button_right.
Lokal funktioniert sogar das hovern richtig... (alle drei bilder werden verändert)
Naja zur Not bleibt ja noch javascript mit drei divs die ich alle via mouseover veränder... ist aber sehr unschön...

Kannst du nicht 1 Bild mit 'ner imagemap benutzen?
http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm

Vieleicht hat ja noch jemand nen Tipp warum der IE lokale Dokumente anders behandelt als welche im Netz...
Dir ist das Zwiebel- bzw. Zonenmodell bekannt?
Anscheinend haben die IE-Entwickler sich gedacht, sie bauen :before und :after ein. Haben aber die Sicherheitsprobleme für externe Zugriffe nicht unter Kontrolle bekommen und jetzt gehts bloß im Internen/lokalen bereich.

Gruß
Snow
Member: kami-kaTze
kami-kaTze Apr 27, 2010 at 10:13:33 (UTC)
Goto Top
ja ist mir bekannt. Allerdings ist die Netzwerkfreigabe auch als Trusted Zone eingerichtet..

Aber meine erste Vermutung ging auch in diese Richtung... Welcher Trottel bei Microsoft kam denn auf die Idee CSS in ne Sicherheitszone einzubauen x.X..

Naja sei's drumm.

Zu deinem Vorschlag mit der Imagemap: Leider funktionier dies nicht da ich auch nur ein Bild benutzen kann.
Imagemap = 1 Bild - n Ziele. Ich benötge aber n Bilder - 1 Ziel. Zusätzlich sollen sich alle Bilder bei einem Hover über eines der Bilder verändern. Dies funktioniert wunderbar mit dem before und after Elemente. Nur leider nicht im IE...

Grund:
Ich möchte eine variabel langen Button haben welcher sich automatisch dem Text anpasst z.B. [###] oder [######]
Wenn man ein einzelnes Bild benutzt kommt es leider zu Verzerrungen des Bildes am Anfang und am Ende: [###] wird zu <######>.
Aus diesem Grund möchte ich das Bild in drei Teile teilen: Angang [, Mitte # und Ende ].
Die Mitte kann ich als automatisch wiederholenden Background in in einer Klasse hinterlegen. # wird zu ######
Nun habe ich die Elemente after und before genutzt um das Anfangs- und das Endbild einzubinden. [###] bzw. [######]
Alles super. Naja mit bleibt nur wohl nur übrig drei DIVs zu erstellen und mit javascript onMouseOver und onMouseOut zu arbeiten um den gleichen Effekt zu erzielen.

Es sei denn natürlich das noch jemand einen Trick weiss :D

Grüße kami
Member: Snowman25
Snowman25 Apr 27, 2010 at 10:24:56 (UTC)
Goto Top
Zitat von @kami-kaTze:
Es sei denn natürlich das noch jemand einen Trick weiss :D
Ich fürchte, da siehts schlecht aus..
Übrigens gefällt mir deine Einstellung, nur im allerletzten Fall JS zu verwenden. Sehr löblich face-wink

Grüße kami

Grüße
Snow
Member: kami-kaTze
kami-kaTze Apr 27, 2010 at 10:44:00 (UTC)
Goto Top
Man weiss ja nie wie der Browser am anderen Ende ausschaut (JS könnte ja aus sein). Desweiteren sind es im JS knapp 15 Zeilen Code (vieleicht 10 wenns optimiert ist) im CSS sinds ganze drei.

Ich würde gern so viel wie möglich Serverseitig vorgeben. Alles was erst beim Client entschieden wird ist eher schlecht... :D

Grüße kami
Member: kami-kaTze
kami-kaTze Jul 29, 2010 at 13:45:36 (UTC)
Goto Top
Its a Bug not a Feature

Scheint nen Fehler im IE 8 zu sein...
GermansolvedQuestionCSSDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 5 CommentsjstrickerWireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 CommentsAlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 Comments