Css probleme mit word-spacing + safari

Dieses Thema im Forum "Web Page Design" wurde erstellt von joedelord, 16.06.2004.

  1. joedelord

    joedelord Thread Starter MacUser Mitglied

    Beiträge:
    481
    Zustimmungen:
    0
    MacUser seit:
    12.12.2002
    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
     
  2. DarkDonald

    DarkDonald MacUser Mitglied

    Beiträge:
    37
    Zustimmungen:
    0
    MacUser seit:
    03.09.2004
    Vor diesem Problem stehe ich auch gerade...gibts dazu inzwischen irgendeine Lösung ?? Den richtigen Wortabstand mit "&nbsp;
     
  3. DarkDonald

    DarkDonald MacUser Mitglied

    Beiträge:
    37
    Zustimmungen:
    0
    MacUser seit:
    03.09.2004
    Nanu? Irgendwie hats oben meinen Text abgesäbelt
     
  4. Arioch

    Arioch MacUser Mitglied

    Beiträge:
    715
    Zustimmungen:
    13
    MacUser seit:
    15.11.2004
    *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 ;)
     
  5. hossa

    hossa MacUser Mitglied

    Beiträge:
    309
    Zustimmungen:
    0
    MacUser seit:
    03.04.2005
    Vielleicht klappts wenn du das mit ins css reinschreibst:
    Code:
    #navi a{
        font-variant: small-caps;
        word-spacing: 30px;
    }
     
  6. Arioch

    Arioch MacUser Mitglied

    Beiträge:
    715
    Zustimmungen:
    13
    MacUser seit:
    15.11.2004
    Nein, leider nicht :(

    Das verhaut mir nur das komplette Design....

    Trotzdem Danke :)

    Gruss,
    Arioch
     
  7. hossa

    hossa MacUser Mitglied

    Beiträge:
    309
    Zustimmungen:
    0
    MacUser seit:
    03.04.2005
    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...
     
  8. Arioch

    Arioch MacUser Mitglied

    Beiträge:
    715
    Zustimmungen:
    13
    MacUser seit:
    15.11.2004
    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;
    			}
    
     
  9. hossa

    hossa MacUser Mitglied

    Beiträge:
    309
    Zustimmungen:
    0
    MacUser seit:
    03.04.2005
    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;
    }
     
  10. Arioch

    Arioch MacUser Mitglied

    Beiträge:
    715
    Zustimmungen:
    13
    MacUser seit:
    15.11.2004
    Hat funktioniert!

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

    Gruss,
    Arioch
     
Die Seite wird geladen...

Diese Seite empfehlen