Frage zur Darstellung in Safari und Google Chrome

[Uwe367]

Hallo zusammen,

Ich bin ein wenig mit großen Hintergrundbildern, die den gesamten Bildschirm ausfüllen, am spielen unbd stoße dabei auf ein merkwürdiges Verhalten von Safari für PC und Google Chrome. Beide Browser setzen ein Symbol in das Hintergrundbild während FF, Explorer und Opera das ganze richtig darstellen. Kennt jemand dieses Verhalten und weiß vielleicht wie man Abhilfe schaffen kann?

Hier mal der Link zu dem ganzen:

http://playground.uwe367.de/test/test.html

Weitehin hätte ich noch eine Frage. Wie man sieht will ich mir einem teiltransparenten Hintergrund für den Content arbeiten. Das dumme an der ganzen Sache ist daß der eigentliche Content ebenfalls diese Transparenz übernimmt was daran liegt daß ich für diesen Container opacity:0.5 angegeben habe. Nun möchte ich allerdings daß der Content (Text, Bilder etc.) selbst keine Transparenz annimmt. Es müßte also, so denke ich, noch ein Container darüber gelegt werden dessen Hintergrund zwar transparent ist, aber opacity:0.5 von dem darunterliegenden Container nicht erbt.
Ist so etwas mit reinem CSS realisierbar?

Bitte nicht aufs "Design" achten, es ist nur ein Versuch.

Gruß Uwe

[breitsch]

Code: Select all

<img id="bgImg" width="100%" height="100%" alt="" src="hintergrund.jpg">

das Symbol wird von diesem Tag generiert; die Datei existiert nicht, ist mir auch nicht ganz klar was du damit bezweckst.

Nimm für halbtransparente Flächen ein png-Hintergrundbild, das verstehen alle neuen Browser und das Problem mit der vererbten Transparenz hast du so nicht mehr.
Siehe Beispiele:
http://www.bar-gelateria-riva.ch
http://www.liudanza.ch

[Uwe367]

[quote="breitsch"]

Code: Select all

<img id="bgImg" width="100%" height="100%" alt="" src="hintergrund.jpg">

das Symbol wird von diesem Tag generiert; die Datei existiert nicht, ist mir auch nicht ganz klar was du damit bezweckst.

Hallo Breitsch,

Danke für den Tip. Die Symbole sind raus. Habe das HG Bild jetzt einfach dem Body Tag zugeordnet und so klappts.
Das mit der transparenten png Grafik hatte ich auch schon überlegt, allerdings war mein Gedanke eben genau der daß ältere Browser eben mit diesen ihre Problemchen haben. Daher war ja meine Frage ob das mit einer reinen CSS Lösung realisierbar wäre.
Trotzdem danke

Gru0 Uwe

[breitsch]

Vergiss die älteren Browser -> http://www.w3schools.com/browsers/browsers_stats.asp

Erfahrungsgemäss haben alte Broswer mehr Probleme mit unterschiedlichen Auffassungen von CSS als mit falscher Darsellung von Transparenz.
Wenn trotzdem jemand mit uralten Versionen unterwegs ist, sieht er einfach die Transparenz nicht - halb so schlimm als seitenweise broswerspezifisches CSS zu schreiben.

[Uwe367]

Hast Recht.. wer mit nem Oldtimer unterwegs ist ist selbst schuld wenn die Darstellung nicht stimmt

[update]

Es wäre dennoch nett, wenn man den Leuten etwas auf die Sprünge helfen könnte:

Code: Select all

<!--[if lte IE 7]>
	<div class="ants clearfix">
		<div class="articleText ants_inner"><p>Sie verwenden eine <a target="_blank" href="http://taz.de/1/leben/internet/artikel/1/kampf-gegen-uralt-browser/" title="Internet Explorer 6 noch immer genutzt: Kampf gegen Uralt-Browser - taz.de">sehr alte Version des Internet-Explorer</a>. Noch sind wir bemüht, auch in diesem Browser zumindest unsere Inhalte zugänglich zu halten.<br />
		Es ist allerdings mit Darstellungsfehlern und eingeschränkten Interakionsmöglichkeiten zu rechnen.<br />
		Mit der Installation eines aktuelleren Browsers erleichtern Sie unsere Arbeit erheblich, <a target="_blank" href="http://www.heise.de/newsticker/meldung/Microsoft-Surfen-mit-dem-Internet-Explorer-6-ist-ein-Risiko-987480.html" title="Microsoft: Surfen mit dem Internet Explorer 6 ist ein Risiko">verbessern den Schutz Ihrer persönlichen Daten</a> und bereiten sich selbst eine Freude:
		<ul>
			<li><a target="_blank" href="http://mozilla-europe.org/de/firefox/" title="mozilla-europe.org/de/firefox/">Mozilla Firefox</a></li>
			<li><a target="_blank" href="http://www.google.ch/chrome/" title="Google Chrome">Google Chrome</a></li>
			<li><a target="_blank" href="http://microsoft.com/germany/windows/internet-explorer/" title="microsoft.com/germany/windows/internet-explorer/">Internet-Explorer 8</a></li>
			<li><a target="_blank" href="http://apple.com/de/safari/" title="apple.com/de/safari/">Apple Safari</a></li>
			<li><a target="_blank" href="http://www.opera.com/download/" title="Opera">Opera</a></li>
		</ul></p>
		</div>
	</div>
<![endif]-->

Hab ich wo "geklaut" (dabei aber umformuliert und erweitert)
Probiers mal aus...

[top]

Ich hatte mich auch mal irgendwo "inspirieren" lassen. Und das ist hier dabei raus gekommen:

Code: Select all

<!--[if lte IE 6]>
<div id="ie6warnung">
<h4>Ihr Browser ist leider veraltet!</h4>
<p>Um diese Seite korrekt anzuzeigen, installieren Sie bitte den aktuellen <a href="http://upgradeie.s3.amazonaws.com/eng/index.html">Internet Explorer</a>. Sie k&ouml;nnen nat&uuml;rlich auch zu einen anderen modernen Browser wie <a href="http://getfirefox.com" target="_blank">Firefox</a>, <a href="http://www.opera.com"target="_blank">Opera</a> oder <a  href="http://www.apple.com/safari/download/" target="_blank">Safari</a> wechseln.</p>
</div>
<![endif]-->

Chrom mag ich nicht. Den lasse ich daher weg...

Bei http://browser-update.org/ kann man sich auch einen entsprechenden Code-Schnipsel holen um auch andere veraltete Browser-Versionen anzeigen zu lassen. Ich mag es aber nicht scripte von Fremden Seiten einzubinden und denen dadurch meine Besucher zu verraten.

[Uwe367]

Die Idee auf einen veralteten Browser aufmerksam zu machen finde ich nicht schlecht. Ich probier das mal aus. Sollte mit dem IE Tester eigentlich funktionieren oder?

Gruß Uwe

[top]

Der hier funktionuckelt zum Testen sonst auch:

http://meineipadresse.de/netrenderer/