text-transform:capitalize - Fehler in Firefox

jump.blueberry · 20. Dez. 2005

Hallo,

ich habe eine "breadcrumbs" über den Inhalt jeder Seite angelegt.
Diese werden dynamisch erzeugt.

Da die Variablen aber klein geschrieben sind, und das irgendwie komisch aussieht, wenn alles klein geschrieben ist, dachte ich mir mit capitalize wäre das zu lösen.
Jetzt geht es zwar im DAU-Browser (IE) aber Firefox lässt es mir klein.
Gibt es irgendeinen Trick, dass es funktioniert?
Hier der Code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
#breadcrumb{
color: #bb6644;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:none;
text-transform:none;
}

a#breadcrumb{
text-transform:capitalize;
}
  
a#breadcrumb:hover{
text-decoration:underline;
}
</style>
</head>

<body>
<span id="breadcrumb">
<?PHP 
	if ($seite!="start"){
	echo "<a href=\"index.php\" id=\"breadcrumb\">Home</a>><a href=\"index.php?kategorie=$kategorie&seite=$kategorie\" id=\"breadcrumb\">".$kategorie."</a>";
	}
	if(($kategorie!=$var)AND ($seite!="start")){
	echo "><a href=\"index.php?kategorie=$kategorie&seite=$var\" id=\"breadcrumb\">".$var."</a>";
	}
	if(($var!=$seite)AND ($seite!="start")){
	echo "><a href=\"index.php?kategorie=$kategorie&seite=$seite\" id=\"breadcrumb\">".$seite."</a>";
	}?>
</body>
</html>

dkdenz · 20. Dez. 2005

Komisch. Der FireFox zeigt mir das aber an:
http://de.selfhtml.org/css/eigenschaften/anzeige/text_transform.htm
Dann ist irgendwo ein Denkfehler drinnen.
Oder es geht nicht bei einzelnen Wörtern oder bei a-Tags.
Überall ist in den Erklärungen von text die Rede.

dkdenz · 20. Dez. 2005

Ich hab's grade ausprobiert.
Es geht im FF nicht bei a-Tags.
Auch nicht im Opera und Konqueror.

brainshock · 20. Dez. 2005

Die Nutzung von ids scheint dir übrigens nicht klar zu sein.

Du kannst den ersten Buchstaben oder das gesamte Wort mit Hilfe von PHP so formatieren wie du es haben willst.

jump.blueberry · 20. Dez. 2005

brainshock schrieb:
Die Nutzung von ids scheint dir übrigens nicht klar zu sein.

Warum?
Wenn ich einem a-tag eine class zuweise, passiert nix.
Also ist es so über IDs doch der schnellste weg alle innerhalb des span-tags gleich zu formatieren.

Du kannst den ersten Buchstaben oder das gesamte Wort mit Hilfe von PHP so formatieren wie du es haben willst.

Hm, ja geht auch!
Nachdem es wahrscheinlich die einzige Lösung ist, hab ich's so gemacht.
Obwohl mir eine einfache html/css-Lösung lieber gewesen wäre.

Hier meine Umsetzung:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
#breadcrumb{
color: #bb6644;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:none;
text-transform:none;
}
  
a#breadcrumb:hover{
text-decoration:underline;
}
</style>
</head>

<body>
	<span id="breadcrumb"><? 
	if ($seite!="start"){?>
	<a href="index.php" id="breadcrumb">Home</a>>
	<a href="index.php?kategorie=$kategorie&seite=$kategorie" id="breadcrumb">
			<? 
	$capitalKategorie=strtoupper(substr($kategorie,0,1));	
	$restKategorie=substr($kategorie,1);
	echo $capitalKategorie.$restKategorie ?></a>
	<?	}
	if(($kategorie!=$var)AND ($seite!="start")){?>
	><a href="index.php?kategorie=$kategorie&seite=$var" id="breadcrumb">
	<? 
	$capitalVar=strtoupper(substr($var,0,1));	
	$restVar=substr($var,1);
	echo $capitalVar.$restVar ?></a>
	<? }
	if(($var!=$seite)AND ($seite!="start")){?>
	><a href="index.php?kategorie=$kategorie&seite=$seite" id="breadcrumb">
	<? 
	$capitalUnterseite=strtoupper(substr($unterseiteName,0,1));	
	$restUnterseite=substr($unterseiteName,1);
	echo $capitalUnterseite.$restUnterseite ?></a>

<?	}?>
	</span>
</body>
</html>

dkdenz · 20. Dez. 2005

Hast Du's hier drinnen schon mal versucht?

Code:

#breadcrumb{
color: #bb6644;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:none;
text-transform:capitalize;
}

jump.blueberry · 21. Dez. 2005

dkdenz schrieb:
Hast Du's hier drinnen schon mal versucht?

Code:

#breadcrumb{ color: #bb6644; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10px; text-decoration:none; text-transform:capitalize; }

Ja hatte ich - funktioniert auch nicht.
Ich hab die Sache mit CSS in dem Fall aufgegeben
Hier meine aufgeräumte PHP-Lösung - vielleicht kann es ja jemand brauchen.

HTML:

<? 

$pfad=$seite='http://'.$_SERVER['SERVER_NAME'].$_SERVER['SCRIPT_NAME'];
if($_GET["kategorie"]!=''){
$kategorie=$_GET["kategorie"];
}else{
$kategorie='aktuell';
}

if($_GET["seite"]!=''){
$seite=$_GET["seite"];
}else{
$seite='start';
}
if(eregi('_',$seite)){
	$seiteExploded=explode('_',$seite);
	$var=$seiteExploded[0];
	$unterseite='1';
	$unterseiteName=$seiteExploded[1];
	}else{
	$var=$seite;
	$unterseite='0';
}
	
function capitalize($wort){
$capital=strtoupper(substr($wort,0,1));	
$rest=substr($wort,1);
echo $capital.$rest ;
}


?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>capitalize</title>
</head>

<body>
	<span id="breadcrumb"><? 
	if ($seite!="start"){?>
	<a href="<? echo $pfad?>" id="breadcrumb">Home</a>>
	<a href="<? echo $pfad?>?kategorie=<? echo $kategorie ?>&seite=<? echo $kategorie?>" id="breadcrumb">
			<? 
	capitalize($kategorie);?></a>
	<?	}
	if(($kategorie!=$var)AND ($seite!="start")){?>
	><a href="<? echo $pfad?>?kategorie=<? echo $kategorie?>&seite=<? echo $var?>" id="breadcrumb">
	<? 
	capitalize($var) ?></a>
	<? }
	if(($var!=$seite)AND ($seite!="start")){?>
	><a href="<? echo $pfad?>?kategorie=<? echo $kategorie?>&seite=<? echo $seite?>" id="breadcrumb">
	<? 
	capitalize($unterseiteName) ?></a>

<?	}?>
	</span>
</body>
</html>

Wenn man die Seite jetzt z.B. so aufruft:

Code:

capitalize.php?kategorie=kontakt&seite=email_hugo

Wird der Quelltext dazu wie folgt erzeugt:

HTML:

<span id="breadcrumb">	<a href="http://www.seite.de/capitalize.php" id="breadcrumb">Home</a>>
	<a href="http://www.seite.de/capitalize.php?kategorie=kontakt&seite=kontakt" id="breadcrumb">
			Kontakt</a>

		><a href="http://www.seite.de/capitalize.php?kategorie=kontakt&seite=email" id="breadcrumb">
	Email</a>
		><a href="http://www.seite.de/capitalize.php?kategorie=kontakt&seite=email_hugo" id="breadcrumb">
	Hugo</a>

	</span>

Manchmal braucht es eben nur einen kleinen Tipp....

Wobei ich immernoch gerne wüsste, warum mir die Nutzung von ids nicht klar ist!

brainshock · 21. Dez. 2005

jump.blueberry schrieb:
Wobei ich immernoch gerne wüsste, warum mir die Nutzung von ids nicht klar ist!

http://www.drweb.de/csstechnik/css_id_class.shtml

jump.blueberry · 21. Dez. 2005

brainshock schrieb:
http://www.drweb.de/csstechnik/css_id_class.shtml

Hm, ja ich weiß schon, dass man ids nur 1x verwenden darf!

Aber kannst du mir bitte sagen, wie man Links sonst verschieden auszeichnet?
Mit Class kannst du keine <a>-tags formatieren.
<a>-tags übernehmen nicht die Attribute übergeordneter Tags.
Und IE nimmt <a>-Tag formatierungen nur, wenn sie sich direkt auf den a-tag bezieht.

Wenn du diesbezüglich mehr weißt, lasse ich mich gerne eines Besseren belehren.

brainshock · 21. Dez. 2005

Wieso kann man a-Tags nicht mit Klassen formatieren?

jump.blueberry · 21. Dez. 2005

brainshock schrieb:
Wieso kann man a-Tags nicht mit Klassen formatieren?

Warum, weiß ich auch nicht!
Aber wenn du dir diesen Code (besonders im IE) anschaust, wirst du sehen, dass es nicht funktioniert.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Link</title>
<style>
body{
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
color: #ff9900;
text-decoration:none;
}

a:link, a:visited{
color:#ff0000;
text-decoration:none;
font-weight:400;
}
a:hover, a:active{
color:#CC0000;
text-decoration:overline;
font-weight:600;
}

.blau{
color: #0000ff;
text-decoration: none;
font-weight:600
}
a.blau:hover{
color:#000066;
text-decoration:underline;
font-weight:600
}

#blau{
color: #0000ff;
text-decoration: none;
font-weight:600
}
a#blau:hover{
color:#000066;
text-decoration:underline;
font-weight:600
}

</style>
</head>

<body>
<a href="#">Link ohne Formatierung</a><br />
<span class="blau"><a href="#">Link ohne Formatierung in einem Span-Tag mit Klasse "blau"</a></span><br>
<span id="blau"><a href="#">Link ohne Formatierung in einem Span-Tag mit ID "blau"</a></span><br>
<a href="#" class="blau">Link mit Klasse</a><br />
<a href="#" id="blau">Link mit ID </a>
</body>
</html>

dkdenz · 21. Dez. 2005

Man kann Links definitiv mit Klassen formatieren.
Man muss es nur richtig machen...

jump.blueberry · 22. Dez. 2005

dkdenz schrieb:
Man kann Links definitiv mit Klassen formatieren.
Man muss es nur richtig machen...

Ja, wenn man a:link,a:hover... nicht global definiert.
Dann muss man aber bei jedem link eine Klasse vergeben.

ein schlauer · 22. Dez. 2005

Wieso? sehen alle deine Links anders aus?

dkdenz · 29. Dez. 2005

dkdenz schrieb:
Ich hab's grade ausprobiert.
Es geht im FF nicht bei a-Tags.
Auch nicht im Opera und Konqueror.

Ich hatte einen Denkfehler drinnen und muss meine gemachte Aussage korrigieren,
denn es funktioniert problemlos...Sorry!

text-transform:capitalize - Fehler in Firefox

jump.blueberry

New member

dkdenz

New member

dkdenz

New member

brainshock

Lounge-Member

jump.blueberry

New member

dkdenz

New member

jump.blueberry

New member

brainshock

Lounge-Member

jump.blueberry

New member

brainshock

Lounge-Member

jump.blueberry

New member

dkdenz

New member

jump.blueberry

New member

ein schlauer

Lounge-Member

dkdenz

New member