Css probleme mit word-spacing + safari

joedelord

joedelord

Aktives Mitglied
Thread Starter
Dabei seit
12.12.2002
Beiträge
492
Reaktionspunkte
0
hallo liebe macuser,

wiedereinmal habe ich kleine probleme beim programmieren.
bei der seite die ich gerad baue verwende ich fuer die navigation textlinks. die einzelnen links sind durch ein leerzeichen getrennt und mit word-spacing in einer <div>in css zweckgemaes formatiert.
das wuerde alles wunderbar funktionieren wenn da nicht safari waehre. safari ignoriert einfach wordspacing in einem link. wenn die navigation nicht verlinkt ist, funktioniert alles einwandtfrei, und mit den links nicht. das problem habe ich uebrigens nur bei safari. sogar der ie5 der schon drauf war schaft das ohne probleme, und alle andere - mozilla, netscape, ... schaffen das auch.

vielleicht weis jemand rat...
danke, joedelord
 
Vor diesem Problem stehe ich auch gerade...gibts dazu inzwischen irgendeine Lösung ?? Den richtigen Wortabstand mit "&nbsp;
 
Nanu? Irgendwie hats oben meinen Text abgesäbelt
 
*Staubtuch auspack*

Seid gegrüsst!

Ich stehe gerade vor dem Selben Problem.

Wenn ich meine Navigation per

Code: 
#navi
			{
			height: 20px;
			background-image: url(../grafiken/navi_bg.gif);
			font-variant: small-caps;
			word-spacing: 30px;
			}

formatiere, wird word-spacing von Safari korrekt interpretiert.

Wenn ich die Wörter, die durch word-spacing formatiert wurden jedoch verlinken möchte, rückt Safari sie wieder zusammen.

Firefox zeigt es korrekt an...

Gibt es da einen Umweg?

Tausend Dank im Voraus,
Arioch


Postskriptum

Mit Umweg meine ich nicht, das ganze per &nbsp; aufzufüllen ;)
 
Vielleicht klappts wenn du das mit ins css reinschreibst:
Code: 
#navi a{
    font-variant: small-caps;
    word-spacing: 30px;
}
 
hossa schrieb:
Vielleicht klappts wenn du das mit ins css reinschreibst:
Code: 
#navi a{
    font-variant: small-caps;
    word-spacing: 30px;
}
Zum Vergrößern anklicken....

Nein, leider nicht :(

Das verhaut mir nur das komplette Design....

Trotzdem Danke :)

Gruss,
Arioch
 
also habs grad nochmal getestet:
html:
HTML: 
<!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" xml:lang="de">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Test</title>
		<link rel="stylesheet" type="text/css" href="style.css" media="all" title="Standard" />
	</head>
<body>
	<div id="navigation">
	Das ist ein Test<br />
	<a href="">Das ist ein Test</a>
	</div>
</body>
</html>

Css:
Code: 
#navigation{
    font-variant: small-caps;
    word-spacing: 30px;
}

Das word-spacing von Link und Text sehen bei mir in Safari (2.0.2) komplett gleich aus... sollte also an irgendwas andrem liegen...
 
Hmm...ich benutze zwar kein xhtml, aber am Doctype liegt es nicht...

Ich poste mal zum bessern Verständnis den vollständigen Code:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Duke's Fingerprint</title>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
		<meta http-equiv="Content-Style-Type" content="text/css">
		<meta http-equiv="imagetoolbar" content="no">
		<link rel="stylesheet" type="text/css" href="scripts/onefitsall.css">
		<meta http-equiv="content-language" content="de">
		<meta name="author" content="Tobias Herzog - Duke's Fingerprint">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="date" content="2006-01-05">
	 </head>
	<body>
		<div id="container">
			<div id="header"></div>
			<div id="navi"><a href="index.html">&bull;Startseite</a> <a href="index.html">&bull;Sonstiges</a> <a href="index.html">&bull;Apple</a> <a href="index.html">&bull;Musik</a> <a href="index.html">&bull;Familie</a>
			</div>
			<div id="content"><br><h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque,
			id pulvinar odio lorem non turpis. Nullam sit amet enim.
			</div>
			<div id="aktuelles"><h3>Aktuelles:</h3><h4>05.01.2006</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			</div>
			<div id="footer">&copy; by Tobias Herzog | www.dukes-fingerprint.info | Impressum</div>
		</div>
	</body>
</html>

Code: 
			a:link { color: #9999FF; }
			a:visited { color: #9999FF; }
			a:hover { color: #CCCCFF; }
			a:active { color: #CCCCFF; }
		
			body
			{
			margin: 0;
			padding: 0;
			font: 85% arial, hevetica, sans-serif;
			text-align: center;
			color: #999999;
			background-color: #D6D6D6;
			}
			li
			{
			display:inline;
			list-style-type:square;
			}
			#container
			{
			margin: 1em auto;
			width: 800px;
			height: 460px;
			text-align: left;
			background-image: url(../grafiken/container_bg.gif);
			border: 1px solid black;
			}
			#header
			{
			height: 70px;
			background-image: url(../grafiken/tastatur01.gif);
			}
			#navi
			{
			height: 20px;
			background-image: url(../grafiken/navi_bg.gif);
			font-variant: small-caps;
			word-spacing: 30px;
			}
			#content
			{
			margin-right: 150px;
			height: 355px;
			background-image: url(../grafiken/content_bg.gif);
			overflow:auto;
			padding-left:5px;
			color: #333366;
			}
			#aktuelles
			{
			margin-left: 650px;
			margin-top: -345px;
			height: 345px;
			width: 145px;
			background-image: url(../grafiken/container_bg.gif);
			overflow:auto;
			padding-left:5px;
			color: #666699;
			}
			#footer
			{
			clear: both;
			height: 15px;
			background-image: url(../grafiken/footer_bg.gif);
			font: 85% arial, hevetica, sans-serif;
			color: white;
			}
 
Du könntest es so lösen:
Schreib das hier mit ins css und lösch das word-spacing im navi Block.
#navi a{
padding: 0 30px 0 0;
}
 
hossa schrieb:
Du könntest es so lösen:
Schreib das hier mit ins css und lösch das word-spacing im navi Block.
#navi a{
padding: 0 30px 0 0;
}
Zum Vergrößern anklicken....

Hat funktioniert!

Tausend Dank, für die Mühe, die Du Dir gemacht hast! :)

Gruss,
Arioch
 
hossa schrieb:
Du könntest es so lösen:
Schreib das hier mit ins css und lösch das word-spacing im navi Block.
#navi a{
padding: 0 30px 0 0;
}
Zum Vergrößern anklicken....
Seltsames Problem :(
Aber der Tipp hat mir auch geholfe, danke :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten