Hack für Safari

SilentBob · 24.11.2006

Moin.

Situation: Es ist jetzt schon mehrmals aufgetaucht, dass zwischen zwei DIVs Abstände entstehen, obwohl dort keine sein sollten. Das passiert nur in Safari.

(benutze 1.3.2 auf 10.3.9) Ich konnte das umgehen, indem ich um ein Element in DIV1, das "an der Grenze" von DIV 1 und DIV2 gelegen ist, einen Rahmen gemacht habe. Nun soll man den natürlich nicht sehen. Also habe ich mich so durchgemmogelt:

Code:

#lala{border: 1px solid transparent;}

Das klappt. FF und Co. zeigen keine Reaktion (bis auf die Tatsache, dass das Element um 1Pixel nach unten verschoben wird

). Safari hat keine Lücke mehr. Glücklich ist der Entwickler. Wenn es nur nicht den #&@§%$-IE gäbe.

Der kann mit dem "transparent" nichts anfangen und macht mir einen weißen Rahmen. D-A-N-K-E auch! *kotz*

Jetzt bin ich auf der Suche nach einem Hack, der nur in Safari läuft. Jemand einen Link parat?

2nd · 25.11.2006

Kannst Du mal etwas mehr Zeilen aus der CSS posten (oder eine Beispielseite)? Ich habe mit DIVs und deren Positionierung in der Regel keine Probleme mit Abständen.

2nd

Hilarious · 25.11.2006

Du könntest den Umstand ausnutzen, dass Safari bereits (einige) Korrekturen umsetzt, die mit CSS2.1 aufgenommen wurden. Und zwar werden bis 2.0 keine CSS-Identifyer zugelassen, die mit einem Unterstrich beginnen, so dass CSS-Klassenbezeichner wie »_rapunzelhaare« vom MSIE 6 und Firefox 1.5 ignoriert werden (die anderen Browser habe ich jetzt nicht getestet, aber diese dürften in Deinem Problemkreis weniger interessante Rollen besetzen).

So hättest Du eine CSS-Klasse, die vor allem für Safari und andere vernünftige Browser Bestand haben darf, vom teuflischen MSIE 6 (5.5.: keine Ahnung) aber nicht umgesetzt wird.

Beispiel:

PHP:

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

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<title>test</title>
		<style type="text/css" media="screen">
body { background-color: #3b03a9; margin: 0; }
p { margin: 0 }
_safariborder { border: solid 1px transparent; }
#eins { background-color: #c30; width: 50px; height: 100px; margin: 0; }
#zwei { background-color: #ffda5c; width: 50px; height: 100px; margin: 0; }
</style>
	</head>

	<body>
		<div id="eins" class="_safariborder">
			<p>EINS</p>
		</div>
		<div id="zwei" class="_safariborder">
			<p>ZWEI</p>
		</div>
	</body>

</html>

So sieht das dann im Ergebnis aus (v.l.n.r.: FF 1.5.x, MSIE 6, Safari 2.x):

Aber: Ich habe keine Ahnung, ob das auch für Safari 1.3.x gilt, da ich schon allein wegen des Geschwindigkeitszuwachses von Safari (WebKit) Dir den Wechsel zu Tiger empfehlen würde. Ähnlich wie 2ndreality sind mir derartige Anomalien an Safari nie aufgefallen (oder ich verdränge sie ganz erfolgreich, ist ja auch schon 2.20 Uhr *gähn'). Probiere mal andere DocTypes aus, vielleicht liegt's ja daran

Viel Erfolg, ich hoffe, es hilft!

Hack für Safari

SilentBob

Aktives Mitglied

2nd

Aktives Mitglied

Hilarious

Aktives Mitglied