nicht angemeldet
Hallo Biggi,
Gerne: ich hab ein Beispiel mal testweise hochgeladen.
http://meinerosen.piranho.de/foto.html
Und die ganze css Datei: http://meinerosen.piranho.de/link.cssDerselbe Effekt tritt bei allen Dateien auf. Ich vermute, das es an der Formatierung des Links liegt, aber ich habe keine Ahnung, was genau diesen Effekt verursacht.
Du gibst der Tabellenzelle und den Links dieselbe Klasse (menu). Dadurch wirkt das display:block auf die Tabellenzelle, welche aber nicht als normales Blockelement, sondern als Tabellenzelle (Standard ist display:table-cell) angezeigt werden soll. Daher rührt auch die Anzeige, dass die Zelle nur die Größe des darin enthaltenen Inhalts hat und nicht dieselbe Höhe wie die Zelle der zweiten Spalte in derselben Zeile (die Inhaltszelle). Falls du diese Darstellung auch weiterhin erreichen willst, solltest du ein zusätzliches div-Element einfügen, welches den Inhalt der Zelle umfasst und diesem Element die Rahmen und Farben zuweisen - oder du steigst gleich auf CSS-Layout um. Auf jeden Fall sollte die Zelle nicht display:block erhalten, es ist somit wohl nich ratsam, dieselbe Klasse für die Links und die Zelle zu benutzen (arbeite besser mit einer ID für die Zelle, die Links darin kannst du dann auch ohne Klasse ansprechen, zum Beispiel #navigation a:link usw.).
Noch etwas zum Stylesheet:
Die Deklarationen für den Rahmen kannst du zusammenfassen, beispielsweise border-style:solid; border-width:1px; border-color:#ccc #666 #666 #ccc;.
Für die vier padding-Deklarationen für oben, rechts, unten und links kannst du kurz padding:6px 3px 6px 4px; und so weiter schreiben, genauso bei margin.
Die margins würde ich generell in allen Regeln für die Links (a:link, a:visited, ...) angleichen, denn momentan springen die Navigationslinks beim Überfahren mit der Maus. Dies hat natürlich auch mit der geänderten Schriftgröße zu tun - es ist schwer, das Springen damit komplett auszuschalten, da du die vergrößerte Schriftgröße wieder mit einem kleineren padding ausgleichen müsstest, und die line-height müsste auch dementsprechend angepasst werden... Ich glaube nicht, dass sich das pixelgenau in den relevanten Browsern lösen lässt.
Am Ende einer Wertes einer font-family-Eigenschaft solltest du eine generische Schriftfamilie angeben (http://selfhtml.teamone.de/css/eigenschaften/schrift.htm#font_family), beispielsweise sans-serif.
Dokumenttyp-Deklarationen am Dokumentanfang sind wichtig, Stichwort »doctype switch« und »standards compliant mode« (siehe Forumsarchiv und Google). In deinem Fall wäre das: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Anstatt <meta http-equiv="content-language" content="de,at,ch"> solltest du das lang-Attribut für das html-Element vergeben, also <html lang="de">. at und ch sind keine Sprachenkürzel, sondern Länderkennzeichen. Die jeweiligen Dialekte werden durch de-DE, de-AT und de-CH beschrieben, also wäre höchstens <meta http-equiv="content-language" content="de-de, de-at, de-ch"> denkbar. Wenn deine Seite keine verständniskritische regionaltypische Sprache enthält, reicht meiner Meinung nach lang="de" bzw. content="de" (das wolltest du mit de,at,ch vermutlich ausdrücken).
Grüße,
Mathias
»Das Usenet ist mittlerweile in Teilen unbenutzbar geworden, ein düsterer, mit Glasscherben und Hundescheiße übersäter Spielplatz für Kontroll- und Hassmaniker, deren Neurosen sich gegenseitig ergänzen.« (MH)